Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
3ff2510720 | ||
|
Omar Basem
|
30f3ed5b3d | ||
|
Omar Basem
|
3da2118e15 | ||
|
Omar Basem
|
e046feb124 | ||
|
Omar Basem
|
1e6c4e1932 | ||
|
Omar Basem
|
2ade8fc7ee | ||
|
Omar Basem
|
ee0df8633e |
@@ -13,7 +13,8 @@
|
|||||||
[status-im2.contexts.contacts.events :as contacts-store]
|
[status-im2.contexts.contacts.events :as contacts-store]
|
||||||
[status-im.multiaccounts.model :as multiaccounts.model]
|
[status-im.multiaccounts.model :as multiaccounts.model]
|
||||||
[status-im.utils.clocks :as utils.clocks]
|
[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
|
(defn- get-chat
|
||||||
[cofx chat-id]
|
[cofx chat-id]
|
||||||
@@ -338,6 +339,12 @@
|
|||||||
[{:keys [db]} shared-element-id]
|
[{:keys [db]} shared-element-id]
|
||||||
{:db (assoc db :shared-element-id 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
|
(rf/defn exit-lightbox-signal
|
||||||
{:events [:chat.ui/exit-lightbox-signal]}
|
{:events [:chat.ui/exit-lightbox-signal]}
|
||||||
[{:keys [db]} value]
|
[{:keys [db]} value]
|
||||||
@@ -357,4 +364,3 @@
|
|||||||
{:events [:chat.ui/lightbox-scale]}
|
{:events [:chat.ui/lightbox-scale]}
|
||||||
[{:keys [db]} value]
|
[{:keys [db]} value]
|
||||||
{:db (assoc db :lightbox/scale value)})
|
{:db (assoc db :lightbox/scale value)})
|
||||||
|
|
||||||
|
|||||||
@@ -65,7 +65,7 @@
|
|||||||
(anim/animate background-color :transparent)
|
(anim/animate background-color :transparent)
|
||||||
(anim/animate opacity 0)
|
(anim/animate opacity 0)
|
||||||
(rf/dispatch (if platform/ios?
|
(rf/dispatch (if platform/ios?
|
||||||
[:chat.ui/exit-lightbox-signal @index]
|
[:navigate-back]
|
||||||
[:navigate-back])))
|
[:navigate-back])))
|
||||||
:style style/close-container}
|
:style style/close-container}
|
||||||
[quo/icon :close {:size 20 :color colors/white}]]
|
[quo/icon :close {:size 20 :color colors/white}]]
|
||||||
|
|||||||
@@ -25,7 +25,7 @@
|
|||||||
(defn toggle-opacity
|
(defn toggle-opacity
|
||||||
[index {:keys [opacity-value border-value transparent? atoms]} portrait?]
|
[index {:keys [opacity-value border-value transparent? atoms]} portrait?]
|
||||||
(let [{:keys [small-list-ref]} atoms
|
(let [{:keys [small-list-ref]} atoms
|
||||||
opacity (reanimated/get-shared-value opacity-value)]
|
opacity (reanimated/get-shared-value opacity-value)]
|
||||||
(if (= opacity 1)
|
(if (= opacity 1)
|
||||||
(do
|
(do
|
||||||
(when platform/ios?
|
(when platform/ios?
|
||||||
@@ -63,8 +63,8 @@
|
|||||||
(orientation/lock-to-portrait "lightbox"))
|
(orientation/lock-to-portrait "lightbox"))
|
||||||
(js/setTimeout #(when @flat-list-ref
|
(js/setTimeout #(when @flat-list-ref
|
||||||
(.scrollToOffset
|
(.scrollToOffset
|
||||||
^js @flat-list-ref
|
^js @flat-list-ref
|
||||||
#js {:animated false :offset (* (+ item-width seperator-width) @index)}))
|
#js {:animated false :offset (* (+ item-width seperator-width) @index)}))
|
||||||
timeout)
|
timeout)
|
||||||
(when platform/ios?
|
(when platform/ios?
|
||||||
(top-view/animate-rotation result screen-width screen-height insets animations))))
|
(top-view/animate-rotation result screen-width screen-height insets animations))))
|
||||||
@@ -124,57 +124,58 @@
|
|||||||
;; we get `insets` from `screen-params` because trying to consume it from
|
;; we get `insets` from `screen-params` because trying to consume it from
|
||||||
;; lightbox screen causes lots of problems
|
;; lightbox screen causes lots of problems
|
||||||
(let [{:keys [messages index insets]} (rf/sub [:get-screen-params])
|
(let [{:keys [messages index insets]} (rf/sub [:get-screen-params])
|
||||||
atoms {:flat-list-ref (atom nil)
|
render-list (reagent/atom false)
|
||||||
:small-list-ref (atom nil)
|
atoms {:flat-list-ref (atom nil)
|
||||||
:scroll-index-lock? (atom true)}
|
:small-list-ref (atom nil)
|
||||||
|
:scroll-index-lock? (atom true)}
|
||||||
;; The initial value of data is the image that was pressed (and not the whole album) in order
|
;; The initial value of data is the image that was pressed (and not the whole album) in order
|
||||||
;; for the transition animation to execute properly, otherwise it would animate towards
|
;; for the transition animation to execute properly, otherwise it would animate towards
|
||||||
;; outside the screen (even if we have `initialScrollIndex` set).
|
;; outside the screen (even if we have `initialScrollIndex` set).
|
||||||
data (reagent/atom [(nth messages index)])
|
data (reagent/atom [(nth messages index)])
|
||||||
scroll-index (reagent/atom index)
|
scroll-index (reagent/atom index)
|
||||||
transparent? (reagent/atom false)
|
transparent? (reagent/atom false)
|
||||||
set-full-height? (reagent/atom false)
|
set-full-height? (reagent/atom false)
|
||||||
window (rf/sub [:dimensions/window])
|
window (rf/sub [:dimensions/window])
|
||||||
window-width (:width window)
|
window-width (:width window)
|
||||||
window-height (:height window)
|
window-height (:height window)
|
||||||
window-height (if platform/android?
|
window-height (if platform/android?
|
||||||
(+ window-height (:top insets))
|
(+ window-height (:top insets))
|
||||||
window-height)
|
window-height)
|
||||||
animations {:background-color (anim/use-val "rgba(0,0,0,0)")
|
animations {:background-color (anim/use-val "rgba(0,0,0,0)")
|
||||||
:border (anim/use-val (if platform/ios? 0 12))
|
:border (anim/use-val (if platform/ios? 0 12))
|
||||||
:opacity (anim/use-val 0)
|
:opacity (anim/use-val 0)
|
||||||
:rotate (anim/use-val "0deg")
|
:rotate (anim/use-val "0deg")
|
||||||
:layout (anim/use-val -10)
|
:layout (anim/use-val -10)
|
||||||
:top-view-y (anim/use-val 0)
|
:top-view-y (anim/use-val 0)
|
||||||
:top-view-x (anim/use-val 0)
|
:top-view-x (anim/use-val 0)
|
||||||
:top-view-width (anim/use-val window-width)
|
:top-view-width (anim/use-val window-width)
|
||||||
:top-view-bg (anim/use-val colors/neutral-100-opa-0)
|
:top-view-bg (anim/use-val colors/neutral-100-opa-0)
|
||||||
:pan-y (anim/use-val 0)
|
:pan-y (anim/use-val 0)
|
||||||
:pan-x (anim/use-val 0)}
|
:pan-x (anim/use-val 0)}
|
||||||
derived {:top-layout (worklet/info-layout (:layout animations)
|
derived {:top-layout (worklet/info-layout (:layout animations)
|
||||||
true)
|
true)
|
||||||
:bottom-layout (worklet/info-layout (:layout animations)
|
:bottom-layout (worklet/info-layout (:layout animations)
|
||||||
false)}
|
false)}
|
||||||
callback (fn [e]
|
callback (fn [e]
|
||||||
(on-viewable-items-changed e scroll-index atoms))]
|
(on-viewable-items-changed e scroll-index atoms))]
|
||||||
(anim/animate (:background-color animations) "rgba(0,0,0,1)")
|
(anim/animate (:background-color animations) "rgba(0,0,0,1)")
|
||||||
(reset! data messages)
|
(reset! data messages)
|
||||||
(orientation/use-device-orientation-change
|
(orientation/use-device-orientation-change
|
||||||
(fn [result]
|
(fn [result]
|
||||||
(if platform/ios?
|
(if platform/ios?
|
||||||
(handle-orientation result scroll-index window-width window-height animations insets atoms)
|
(handle-orientation result scroll-index window-width window-height animations insets atoms)
|
||||||
;; `use-device-orientation-change` will always be called on Android, so need to check
|
;; `use-device-orientation-change` will always be called on Android, so need to check
|
||||||
(orientation/get-auto-rotate-state
|
(orientation/get-auto-rotate-state
|
||||||
(fn [enabled?]
|
(fn [enabled?]
|
||||||
;; RNN does not support landscape-right
|
;; RNN does not support landscape-right
|
||||||
(when (and enabled? (not= result orientation/landscape-right))
|
(when (and enabled? (not= result orientation/landscape-right))
|
||||||
(handle-orientation result
|
(handle-orientation result
|
||||||
scroll-index
|
scroll-index
|
||||||
window-width
|
window-width
|
||||||
window-height
|
window-height
|
||||||
animations
|
animations
|
||||||
insets
|
insets
|
||||||
atoms)))))))
|
atoms)))))))
|
||||||
(rn/use-effect (fn []
|
(rn/use-effect (fn []
|
||||||
(when @(:flat-list-ref atoms)
|
(when @(:flat-list-ref atoms)
|
||||||
(.scrollToIndex ^js @(:flat-list-ref atoms)
|
(.scrollToIndex ^js @(:flat-list-ref atoms)
|
||||||
@@ -185,6 +186,7 @@
|
|||||||
(anim/animate (:border animations) 12))
|
(anim/animate (:border animations) 12))
|
||||||
(if platform/ios? 250 100))
|
(if platform/ios? 250 100))
|
||||||
(js/setTimeout #(reset! (:scroll-index-lock? atoms) false) 300)
|
(js/setTimeout #(reset! (:scroll-index-lock? atoms) false) 300)
|
||||||
|
(js/setTimeout #(reset! render-list true) 500)
|
||||||
(fn []
|
(fn []
|
||||||
(rf/dispatch [:chat.ui/zoom-out-signal nil])
|
(rf/dispatch [:chat.ui/zoom-out-signal nil])
|
||||||
(when platform/android?
|
(when platform/android?
|
||||||
@@ -202,44 +204,73 @@
|
|||||||
window-height
|
window-height
|
||||||
window-width)
|
window-width)
|
||||||
item-width (if (and landscape? platform/ios?) screen-height screen-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
|
[reanimated/view
|
||||||
{:style (reanimated/apply-animations-to-style {:background-color (:background-color
|
{:style (reanimated/apply-animations-to-style {:background-color (:background-color
|
||||||
animations)}
|
animations)}
|
||||||
{:height screen-height})}
|
{: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/gesture-detector
|
||||||
{:gesture (drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
|
{:gesture (drag-gesture animations (and landscape? platform/ios?) set-full-height?)}
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (reanimated/apply-animations-to-style
|
{:style (reanimated/apply-animations-to-style
|
||||||
{:transform [{:translateY (:pan-y animations)}
|
{:transform [{:translateY (:pan-y animations)}
|
||||||
{:translateX (:pan-x animations)}]}
|
{:translateX (:pan-x animations)}]}
|
||||||
{})}
|
{})}
|
||||||
[gesture/flat-list
|
(if @render-list
|
||||||
{:ref #(reset! (:flat-list-ref atoms) %)
|
[gesture/flat-list
|
||||||
:key-fn :message-id
|
{:ref #(reset! (:flat-list-ref atoms) %)
|
||||||
:style {:width (+ screen-width seperator-width)}
|
:key-fn :message-id
|
||||||
:data @data
|
:style {:width (+ screen-width seperator-width)}
|
||||||
:render-fn image
|
:data @data
|
||||||
:render-data {:opacity-value (:opacity animations)
|
:render-fn image
|
||||||
:border-value (:border animations)
|
:render-data {:opacity-value (:opacity animations)
|
||||||
:transparent? transparent?
|
:border-value (:border animations)
|
||||||
:set-full-height? set-full-height?
|
:transparent? transparent?
|
||||||
:screen-height screen-height
|
:set-full-height? set-full-height?
|
||||||
:screen-width screen-width
|
:screen-height screen-height
|
||||||
:window-height window-height
|
:screen-width screen-width
|
||||||
:window-width window-width
|
:window-height window-height
|
||||||
:atoms atoms}
|
:window-width window-width
|
||||||
:horizontal horizontal?
|
:atoms atoms}
|
||||||
:inverted inverted?
|
:initial-scroll-index index
|
||||||
:paging-enabled true
|
:horizontal horizontal?
|
||||||
:get-item-layout (fn [_ index] (get-item-layout _ index item-width))
|
:inverted inverted?
|
||||||
:viewability-config {:view-area-coverage-percent-threshold 50
|
:paging-enabled true
|
||||||
:wait-for-interaction true}
|
:get-item-layout (fn [_ index] (get-item-layout _ index item-width))
|
||||||
:shows-vertical-scroll-indicator false
|
:viewability-config {:view-area-coverage-percent-threshold 50
|
||||||
:shows-horizontal-scroll-indicator false
|
:wait-for-interaction true}
|
||||||
:on-viewable-items-changed callback}]]]
|
:shows-vertical-scroll-indicator false
|
||||||
(when (and (not @transparent?) (not landscape?))
|
:shows-horizontal-scroll-indicator false
|
||||||
[bottom-view/bottom-view messages index scroll-index insets animations derived
|
:on-viewable-items-changed callback}]
|
||||||
item-width atoms])]))]))])
|
[rn/view
|
||||||
|
{:style (style/image (+ screen-width seperator-width) screen-height)}
|
||||||
|
[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])
|
||||||
|
]
|
||||||
|
))]))])
|
||||||
|
|||||||
@@ -52,13 +52,11 @@
|
|||||||
{:key (:message-id item)
|
{:key (:message-id item)
|
||||||
:active-opacity 1
|
:active-opacity 1
|
||||||
:on-long-press #(on-long-press message context)
|
: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
|
[fast-image/fast-image
|
||||||
{:style (style/image dimensions index portrait? images-count)
|
{:style (style/image dimensions index portrait? images-count)
|
||||||
:source {:uri (:image (:content item))}
|
:source {:uri (:image (:content item))}
|
||||||
|
|||||||
@@ -27,13 +27,11 @@
|
|||||||
:key message-id
|
:key message-id
|
||||||
:style {:margin-top (when (pos? index) 10)}
|
:style {:margin-top (when (pos? index) 10)}
|
||||||
:on-long-press on-long-press
|
: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))
|
(when (and (not= text "placeholder") (= index 0))
|
||||||
[rn/view {:style {:margin-bottom 10}} [text/text-content message context]])
|
[rn/view {:style {:margin-bottom 10}} [text/text-content message context]])
|
||||||
[fast-image/fast-image
|
[fast-image/fast-image
|
||||||
|
|||||||
Reference in New Issue
Block a user