WIP: margins around screen

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

@@ -139,17 +139,19 @@
 
 (defn init-animations
   []
-  {:background-color (anim/use-val colors/neutral-100-opa-0)
-   :border           (anim/use-val (if platform/ios? 0 12))
-   :opacity          (anim/use-val 0)
-   :rotate           (anim/use-val "0deg")
-   :layout           (anim/use-val -10)
-   :top-view-y       (anim/use-val 0)
-   :top-view-x       (anim/use-val 0)
-   :top-view-width   (anim/use-val (:width (rn/get-window)))
-   :top-view-bg      (anim/use-val colors/neutral-100-opa-0)
-   :pan-y            (anim/use-val 0)
-   :pan-x            (anim/use-val 0)})
+  {:background-color  (anim/use-val colors/neutral-100-opa-0)
+   :border            (anim/use-val (if platform/ios? 0 12))
+   :margin-horizontal (anim/use-val 8)
+   :img-width         0
+   :opacity           (anim/use-val 0)
+   :rotate            (anim/use-val "0deg")
+   :layout            (anim/use-val -10)
+   :top-view-y        (anim/use-val 0)
+   :top-view-x        (anim/use-val 0)
+   :top-view-width    (anim/use-val (:width (rn/get-window)))
+   :top-view-bg       (anim/use-val colors/neutral-100-opa-0)
+   :pan-y             (anim/use-val 0)
+   :pan-x             (anim/use-val 0)})
 
 (defn init-derived-animations
   [{:keys [layout]}]

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

@@ -1,22 +1,22 @@
 (ns status-im2.contexts.chat.lightbox.view
   (:require
     [clojure.string :as string]
+    [oops.core :refer [oget]]
     [quo2.foundations.colors :as colors]
     [react-native.core :as rn]
+    [react-native.gesture :as gesture]
     [react-native.orientation :as orientation]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [status-im2.contexts.chat.lightbox.animations :as anim]
-    [status-im2.contexts.chat.lightbox.style :as style]
-    [utils.re-frame :as rf]
-    [react-native.gesture :as gesture]
-    [status-im2.contexts.chat.lightbox.zoomable-image.view :as zoomable-image]
-    [status-im2.contexts.chat.lightbox.top-view :as top-view]
     [status-im2.contexts.chat.lightbox.bottom-view :as bottom-view]
-    [oops.core :refer [oget]]
+    [status-im2.contexts.chat.lightbox.constants :as constants]
+    [status-im2.contexts.chat.lightbox.style :as style]
+    [status-im2.contexts.chat.lightbox.top-view :as top-view]
     [status-im2.contexts.chat.lightbox.utils :as utils]
-    [status-im2.contexts.chat.lightbox.constants :as constants]))
+    [status-im2.contexts.chat.lightbox.zoomable-image.view :as zoomable-image]
+    [utils.re-frame :as rf]))
 
 (defn get-item-layout
   [_ index item-width]
@@ -36,10 +36,9 @@
       (rf/dispatch [:chat.ui/update-shared-element-id (:message-id (oget changed :item))]))))
 
 (defn image
-  [message index _ {:keys [screen-width screen-height] :as args}]
-  [rn/view
-   {:style (style/image (+ screen-width constants/separator-width) screen-height)}
-   [:f> zoomable-image/zoomable-image message index args]
+  [message index _ {:keys [screen-width screen-height] :as render-data}]
+  [rn/view {:style (style/image (+ screen-width constants/separator-width) screen-height)}
+   [:f> zoomable-image/zoomable-image message index render-data]
    [rn/view {:style {:width constants/separator-width}}]])
 
 (defn lightbox-content
@@ -81,16 +80,17 @@
          :style                             {:width (+ screen-width constants/separator-width)}
          :data                              @data
          :render-fn                         image
-         :render-data                       {:opacity-value    (:opacity animations)
-                                             :border-value     (:border animations)
-                                             :transparent?     transparent?
-                                             :set-full-height? set-full-height?
-                                             :screen-height    screen-height
-                                             :screen-width     screen-width
-                                             :window-height    window-height
-                                             :window-width     window-width
-                                             :props            props
-                                             :curr-orientation curr-orientation}
+         :render-data                       {:opacity-value     (:opacity animations)
+                                             :border-value      (:border animations)
+                                             :margin-horizontal (:margin-horizontal animations)
+                                             :transparent?      transparent?
+                                             :set-full-height?  set-full-height?
+                                             :screen-height     screen-height
+                                             :screen-width      screen-width
+                                             :window-height     window-height
+                                             :window-width      window-width
+                                             :props             props
+                                             :curr-orientation  curr-orientation}
          :horizontal                        horizontal?
          :inverted                          inverted?
          :paging-enabled                    true

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

@@ -7,17 +7,26 @@
   [{:keys [width height]}
    {:keys [pan-x pan-y pinch-x pinch-y scale]}
    set-full-height?
-   portrait?]
+   portrait?
+   margin-horizontal]
+  (prn margin-horizontal "!!!!!!!!!!!!!!!!!" width
+       (or platform/ios? portrait?))
   (reanimated/apply-animations-to-style
    {:transform [{:translateX pan-x}
                 {:translateY pan-y}
                 {:translateX pinch-x}
                 {:translateY pinch-y}
-                {:scale scale}]}
-   {:justify-content :center
-    :align-items     :center
-    :width           (if (or platform/ios? portrait?) width "100%")
-    :height          (if set-full-height? "100%" height)}))
+                {:scale scale}]
+    :margin-horizontal margin-horizontal
+    }
+   {:justify-content   :center
+    :align-items       :center
+    :flex 1
+    #_#_:width             (when-not (or portrait? platform/ios?)
+                         "100%")
+    #_#_:width             (if (or platform/ios? portrait?) width "100%")
+    :height            (if set-full-height? "100%" height)
+    :overflow          :hidden}))
 
 (defn image
   [{:keys [image-width image-height]}
@@ -27,5 +36,6 @@
    {:transform     [{:rotate rotate}
                     {:scale rotate-scale}]
     :border-radius border-radius}
-   {:width  image-width
-    :height image-height}))
+   {:height image-height
+    :width  image-width
+    }))

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

@@ -106,7 +106,10 @@
     (rescale c/min-scale true)))
 
 (defn toggle-opacity
-  [index {:keys [opacity-value border-value transparent? props]} portrait?]
+  [index
+   {:keys [opacity-value border-value margin-horizontal transparent? props]}
+   portrait?
+   {:keys [width]}]
   (let [{:keys [small-list-ref timers]} props
         opacity                         (reanimated/get-shared-value opacity-value)]
     (if (= opacity 1)
@@ -135,7 +138,10 @@
             :show-2
             (js/setTimeout #(navigation/merge-options "lightbox" {:statusBar {:visible true}})
                            (if platform/ios? 150 50))))))
-    (anim/animate border-value (if (= opacity 1) 0 12))))
+    (anim/animate border-value (if (= opacity 1) 0 12))
+    (anim/animate margin-horizontal (if (= opacity 1) 0 16 ;106 ;width (- width 16)
+                                                      ))
+    ))
 
 ;;; Dimensions
 (defn get-dimensions

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

@@ -1,23 +1,22 @@
 (ns status-im2.contexts.chat.lightbox.zoomable-image.view
   (:require
+    [oops.core :refer [oget]]
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
+    [react-native.orientation :as orientation]
     [react-native.platform :as platform]
     [react-native.reanimated :as reanimated]
-    [utils.re-frame :as rf]
-    [oops.core :refer [oget]]
-    [react-native.orientation :as orientation]
+    [status-im.utils.http :as http]
     [status-im2.contexts.chat.lightbox.animations :as anim]
     [status-im2.contexts.chat.lightbox.zoomable-image.constants :as c]
     [status-im2.contexts.chat.lightbox.zoomable-image.style :as style]
     [status-im2.contexts.chat.lightbox.zoomable-image.utils :as utils]
-    [status-im.utils.http :as http]))
+    [utils.re-frame :as rf]))
 
 (defn tap-gesture
   [on-tap]
-  (->
-    (gesture/gesture-tap)
-    (gesture/on-start #(on-tap))))
+  (-> (gesture/gesture-tap)
+      (gesture/on-start on-tap)))
 
 (defn double-tap-gesture
   [{:keys [width height screen-width screen-height y-threshold-scale x-threshold-scale]}
@@ -25,27 +24,26 @@
    rescale
    transparent?
    toggle-opacity]
-  (->
-    (gesture/gesture-tap)
-    (gesture/number-of-taps 2)
-    (gesture/on-start
-     (fn [e]
-       (if (= (anim/get-val scale) c/min-scale)
-         (let [translate-x (utils/get-double-tap-offset width screen-width (oget e "x"))
-               translate-y (utils/get-double-tap-offset height screen-height (oget e "y"))]
-           (when (> c/double-tap-scale x-threshold-scale)
-             (anim/animate pan-x translate-x)
-             (anim/set-val pan-x-start translate-x))
-           (when (> c/double-tap-scale y-threshold-scale)
-             (anim/animate pan-y translate-y)
-             (anim/set-val pan-y-start translate-y))
-           (rescale c/double-tap-scale)
-           (when (not @transparent?)
-             (toggle-opacity)))
-         (do
-           (rescale c/min-scale)
-           (when @transparent?
-             (toggle-opacity))))))))
+  (-> (gesture/gesture-tap)
+      (gesture/number-of-taps 2)
+      (gesture/on-start
+       (fn [e]
+         (if (= (anim/get-val scale) c/min-scale)
+           (let [translate-x (utils/get-double-tap-offset width screen-width (oget e "x"))
+                 translate-y (utils/get-double-tap-offset height screen-height (oget e "y"))]
+             (when (> c/double-tap-scale x-threshold-scale)
+               (anim/animate pan-x translate-x)
+               (anim/set-val pan-x-start translate-x))
+             (when (> c/double-tap-scale y-threshold-scale)
+               (anim/animate pan-y translate-y)
+               (anim/set-val pan-y-start translate-y))
+             (rescale c/double-tap-scale)
+             (when (not @transparent?)
+               (toggle-opacity)))
+           (do
+             (rescale c/min-scale)
+             (when @transparent?
+               (toggle-opacity))))))))
 
 ;; not using on-finalize because on-finalize gets called always regardless the gesture executed or not
 (defn finalize-pinch
@@ -84,91 +82,90 @@
    rescale
    transparent?
    toggle-opacity]
-  (->
-    (gesture/gesture-pinch)
-    (gesture/on-begin (fn [e]
-                        (when platform/ios?
-                          (reset! focal-x (oget e "focalX"))
-                          (reset! focal-y (utils/get-focal (oget e "focalY") height screen-height)))))
-    (gesture/on-start (fn [e]
-                        (when (and (= (anim/get-val saved-scale) c/min-scale) (not @transparent?))
-                          (toggle-opacity))
-                        (when platform/android?
-                          (reset! focal-x (utils/get-focal (oget e "focalX") width screen-width))
-                          (reset! focal-y (utils/get-focal (oget e "focalY") height screen-height)))))
-    (gesture/on-update (fn [e]
-                         (let [new-scale   (* (oget e "scale") (anim/get-val saved-scale))
-                               scale-diff  (utils/get-scale-diff new-scale (anim/get-val saved-scale))
-                               new-pinch-x (utils/get-pinch-position scale-diff screen-width @focal-x)
-                               new-pinch-y (utils/get-pinch-position scale-diff screen-height @focal-y)]
-                           (when (and (>= new-scale c/max-scale)
-                                      (= (anim/get-val pinch-x-max) js/Infinity))
-                             (anim/set-val pinch-x-max (anim/get-val pinch-x))
-                             (anim/set-val pinch-y-max (anim/get-val pinch-y)))
-                           (anim/set-val pinch-x (+ new-pinch-x (anim/get-val pinch-x-start)))
-                           (anim/set-val pinch-y (+ new-pinch-y (anim/get-val pinch-y-start)))
-                           (anim/set-val scale new-scale))))
-    (gesture/on-end
-     (fn []
-       (cond
-         (< (anim/get-val scale) c/min-scale)
-         (do
-           (when @transparent?
-             (toggle-opacity))
-           (rescale c/min-scale))
-         (> (anim/get-val scale) c/max-scale)
-         (do
-           (anim/animate pinch-x (anim/get-val pinch-x-max))
-           (anim/set-val pinch-x-start (anim/get-val pinch-x-max))
-           (anim/set-val pinch-x-max js/Infinity)
-           (anim/animate pinch-y (anim/get-val pinch-y-max))
-           (anim/set-val pinch-y-start (anim/get-val pinch-y-max))
-           (anim/set-val pinch-y-max js/Infinity)
-           (anim/animate scale c/max-scale)
-           (anim/set-val saved-scale c/max-scale))
-         :else
-         (do
-           (anim/set-val saved-scale (anim/get-val scale))
-           (anim/set-val pinch-x-start (anim/get-val pinch-x))
-           (anim/set-val pinch-y-start (anim/get-val pinch-y))
-           (when (< (anim/get-val scale) x-threshold-scale)
-             (utils/center-x animations false))
-           (when (< (anim/get-val scale) y-threshold-scale)
-             (utils/center-y animations false))))
-       (finalize-pinch dimensions animations state)))))
+  (-> (gesture/gesture-pinch)
+      (gesture/on-begin (fn [e]
+                          (when platform/ios?
+                            (reset! focal-x (oget e "focalX"))
+                            (reset! focal-y (utils/get-focal (oget e "focalY") height screen-height)))))
+      (gesture/on-start (fn [e]
+                          (when (and (= (anim/get-val saved-scale) c/min-scale) (not @transparent?))
+                            (toggle-opacity))
+                          (when platform/android?
+                            (reset! focal-x (utils/get-focal (oget e "focalX") width screen-width))
+                            (reset! focal-y (utils/get-focal (oget e "focalY") height screen-height)))))
+      (gesture/on-update
+       (fn [e]
+         (let [new-scale   (* (oget e "scale") (anim/get-val saved-scale))
+               scale-diff  (utils/get-scale-diff new-scale (anim/get-val saved-scale))
+               new-pinch-x (utils/get-pinch-position scale-diff screen-width @focal-x)
+               new-pinch-y (utils/get-pinch-position scale-diff screen-height @focal-y)]
+           (when (and (>= new-scale c/max-scale)
+                      (= (anim/get-val pinch-x-max) js/Infinity))
+             (anim/set-val pinch-x-max (anim/get-val pinch-x))
+             (anim/set-val pinch-y-max (anim/get-val pinch-y)))
+           (anim/set-val pinch-x (+ new-pinch-x (anim/get-val pinch-x-start)))
+           (anim/set-val pinch-y (+ new-pinch-y (anim/get-val pinch-y-start)))
+           (anim/set-val scale new-scale))))
+      (gesture/on-end
+       (fn []
+         (cond
+           (< (anim/get-val scale) c/min-scale)
+           (do
+             (when @transparent?
+               (toggle-opacity))
+             (rescale c/min-scale))
+           (> (anim/get-val scale) c/max-scale)
+           (do
+             (anim/animate pinch-x (anim/get-val pinch-x-max))
+             (anim/set-val pinch-x-start (anim/get-val pinch-x-max))
+             (anim/set-val pinch-x-max js/Infinity)
+             (anim/animate pinch-y (anim/get-val pinch-y-max))
+             (anim/set-val pinch-y-start (anim/get-val pinch-y-max))
+             (anim/set-val pinch-y-max js/Infinity)
+             (anim/animate scale c/max-scale)
+             (anim/set-val saved-scale c/max-scale))
+           :else
+           (do
+             (anim/set-val saved-scale (anim/get-val scale))
+             (anim/set-val pinch-x-start (anim/get-val pinch-x))
+             (anim/set-val pinch-y-start (anim/get-val pinch-y))
+             (when (< (anim/get-val scale) x-threshold-scale)
+               (utils/center-x animations false))
+             (when (< (anim/get-val scale) y-threshold-scale)
+               (utils/center-y animations false))))
+         (finalize-pinch dimensions animations state)))))
 
 (defn pan-x-gesture
   [{:keys [width screen-width x-threshold-scale]}
    {:keys [scale pan-x-start pan-x pinch-x pinch-x-start]}
    {:keys [pan-x-enabled?]}
    rescale]
-  (->
-    (gesture/gesture-pan)
-    (gesture/enabled @pan-x-enabled?)
-    (gesture/average-touches false)
-    (gesture/on-update (fn [e]
-                         (anim/set-val pan-x (+ (anim/get-val pan-x-start) (oget e "translationX")))))
-    (gesture/on-end
-     (fn [e]
-       (let [curr-offset (+ (anim/get-val pan-x) (anim/get-val pinch-x-start))
-             max-offset  (utils/get-max-offset width screen-width (anim/get-val scale))
-             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
-             velocity    (* (oget e "velocityX") c/velocity-factor)]
-         (cond
-           (< (anim/get-val scale) x-threshold-scale)
-           (rescale c/min-scale)
-           (> (Math/abs curr-offset) (Math/abs max-offset))
-           (do
-             (anim/animate pan-x max-offset)
-             (anim/set-val pan-x-start max-offset)
-             (anim/animate pinch-x c/init-offset)
-             (anim/set-val pinch-x-start c/init-offset))
-           :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (anim/get-val pinch-x-start))
-                 upper-bound (- (Math/abs max-offset) (anim/get-val pinch-x-start))]
-             (anim/set-val pan-x-start (anim/get-val pan-x))
-             (anim/animate-decay pan-x velocity [lower-bound upper-bound])
-             (anim/animate-decay pan-x-start velocity [lower-bound upper-bound]))))))))
+  (-> (gesture/gesture-pan)
+      (gesture/enabled @pan-x-enabled?)
+      (gesture/average-touches false)
+      (gesture/on-update (fn [e]
+                           (anim/set-val pan-x (+ (anim/get-val pan-x-start) (oget e "translationX")))))
+      (gesture/on-end
+       (fn [e]
+         (let [curr-offset (+ (anim/get-val pan-x) (anim/get-val pinch-x-start))
+               max-offset  (utils/get-max-offset width screen-width (anim/get-val scale))
+               max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
+               velocity    (* (oget e "velocityX") c/velocity-factor)]
+           (cond
+             (< (anim/get-val scale) x-threshold-scale)
+             (rescale c/min-scale)
+             (> (Math/abs curr-offset) (Math/abs max-offset))
+             (do
+               (anim/animate pan-x max-offset)
+               (anim/set-val pan-x-start max-offset)
+               (anim/animate pinch-x c/init-offset)
+               (anim/set-val pinch-x-start c/init-offset))
+             :else
+             (let [lower-bound (- (- (Math/abs max-offset)) (anim/get-val pinch-x-start))
+                   upper-bound (- (Math/abs max-offset) (anim/get-val pinch-x-start))]
+               (anim/set-val pan-x-start (anim/get-val pan-x))
+               (anim/animate-decay pan-x velocity [lower-bound upper-bound])
+               (anim/animate-decay pan-x-start velocity [lower-bound upper-bound]))))))))
 
 
 (defn pan-y-gesture
@@ -176,39 +173,38 @@
    {:keys [scale pan-y-start pan-y pinch-y pinch-y-start]}
    {:keys [pan-y-enabled?]}
    rescale]
-  (->
-    (gesture/gesture-pan)
-    (gesture/enabled @pan-y-enabled?)
-    (gesture/average-touches false)
-    (gesture/on-update (fn [e]
-                         (anim/set-val pan-y (+ (anim/get-val pan-y-start) (oget e "translationY")))))
-    (gesture/on-end
-     (fn [e]
-       (let [curr-offset (+ (anim/get-val pan-y) (anim/get-val pinch-y-start))
-             max-offset  (utils/get-max-offset height screen-height (anim/get-val scale))
-             max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
-             velocity    (* (oget e "velocityY") c/velocity-factor)]
-         (cond
-           (< (anim/get-val scale) y-threshold-scale)
-           (rescale c/min-scale)
-           (> (Math/abs curr-offset) (Math/abs max-offset))
-           (do
-             (anim/animate pan-y max-offset)
-             (anim/set-val pan-y-start max-offset)
-             (anim/animate pinch-y c/init-offset)
-             (anim/set-val pinch-y-start c/init-offset))
-           :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (anim/get-val pinch-y-start))
-                 upper-bound (- (Math/abs max-offset) (anim/get-val pinch-y-start))]
-             (anim/set-val pan-y-start (anim/get-val pan-y))
-             (anim/animate-decay pan-y velocity [lower-bound upper-bound])
-             (anim/animate-decay pan-y-start velocity [lower-bound upper-bound]))))))))
+  (-> (gesture/gesture-pan)
+      (gesture/enabled @pan-y-enabled?)
+      (gesture/average-touches false)
+      (gesture/on-update (fn [e]
+                           (anim/set-val pan-y (+ (anim/get-val pan-y-start) (oget e "translationY")))))
+      (gesture/on-end
+       (fn [e]
+         (let [curr-offset (+ (anim/get-val pan-y) (anim/get-val pinch-y-start))
+               max-offset  (utils/get-max-offset height screen-height (anim/get-val scale))
+               max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
+               velocity    (* (oget e "velocityY") c/velocity-factor)]
+           (cond
+             (< (anim/get-val scale) y-threshold-scale)
+             (rescale c/min-scale)
+             (> (Math/abs curr-offset) (Math/abs max-offset))
+             (do
+               (anim/animate pan-y max-offset)
+               (anim/set-val pan-y-start max-offset)
+               (anim/animate pinch-y c/init-offset)
+               (anim/set-val pinch-y-start c/init-offset))
+             :else
+             (let [lower-bound (- (- (Math/abs max-offset)) (anim/get-val pinch-y-start))
+                   upper-bound (- (Math/abs max-offset) (anim/get-val pinch-y-start))]
+               (anim/set-val pan-y-start (anim/get-val pan-y))
+               (anim/animate-decay pan-y velocity [lower-bound upper-bound])
+               (anim/animate-decay pan-y-start velocity [lower-bound upper-bound]))))))))
 
 (defn- f-zoomable-image
   [dimensions animations state rescale curr-orientation content focused? index render-data]
   (let [{:keys [transparent? set-full-height?]} render-data
         portrait? (= curr-orientation orientation/portrait)
-        on-tap #(utils/toggle-opacity index render-data portrait?)
+        on-tap #(utils/toggle-opacity index render-data portrait? dimensions)
         tap (tap-gesture on-tap)
         double-tap (double-tap-gesture dimensions animations rescale transparent? on-tap)
         pinch (pinch-gesture dimensions animations state rescale transparent? on-tap)
@@ -222,11 +218,15 @@
       {:style (style/container dimensions
                                animations
                                @set-full-height?
-                               (= curr-orientation orientation/portrait))}
+                               (= curr-orientation orientation/portrait)
+                               (:margin-horizontal render-data))}
       [reanimated/fast-image
-       {:source    {:uri (http/replace-port (:image content) (rf/sub [:mediaserver/port]))}
-        :native-ID (when focused? :shared-element)
-        :style     (style/image dimensions animations (:border-value render-data))}]]]))
+       {:source      {:uri (http/replace-port (:image content) (rf/sub [:mediaserver/port]))}
+        :native-ID   (when focused? :shared-element)
+        :resize-mode :contain
+        :style       (style/image dimensions
+                                  animations
+                                  (:border-value render-data))}]]]))
 
 (defn zoomable-image
   []

src/status_im2/contexts/onboarding/common/background/view.cljs

@@ -90,4 +90,3 @@
          :overlay-color :transparent}])]))
 
 (defn view [dark-overlay?] [:f> f-view dark-overlay?])
-