test

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

@@ -3,7 +3,7 @@
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
     [react-native.platform :as platform]
-    [react-native.reanimated :as ra]
+    [react-native.reanimated :as reanimated]
     [reagent.core :as reagent]
     [utils.re-frame :as rf]
     [oops.core :refer [oget]]
@@ -27,15 +27,15 @@
     (gesture/number-of-taps 2)
     (gesture/on-start
      (fn [e]
-       (if (= (ra/get-val scale) c/min-scale)
+       (if (= (reanimated/get-shared-value 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)
-             (ra/animate pan-x translate-x)
-             (ra/set-val pan-x-start translate-x))
+             (reanimated/set-shared-value pan-x (reanimated/with-timing translate-x))
+             (reanimated/set-shared-value pan-x-start translate-x))
            (when (> c/double-tap-scale y-threshold-scale)
-             (ra/animate pan-y translate-y)
-             (ra/set-val pan-y-start translate-y))
+             (reanimated/set-shared-value pan-y (reanimated/with-timing translate-y))
+             (reanimated/set-shared-value pan-y-start translate-y))
            (rescale c/double-tap-scale))
          (rescale c/min-scale))))))
 
@@ -45,30 +45,30 @@
    {:keys [saved-scale scale pinch-x pinch-y pinch-x-start pinch-y-start pan-y pan-y-start pan-x
            pan-x-start]}
    {:keys [pan-x-enabled? pan-y-enabled?]}]
-  (let [curr-offset-y (+ (ra/get-val pan-y) (ra/get-val pinch-y))
-        max-offset-y  (utils/get-max-offset height screen-height (ra/get-val scale))
+  (let [curr-offset-y (+ (reanimated/get-shared-value pan-y) (reanimated/get-shared-value pinch-y))
+        max-offset-y  (utils/get-max-offset height screen-height (reanimated/get-shared-value scale))
         max-offset-y  (if (neg? curr-offset-y) (- max-offset-y) max-offset-y)
-        curr-offset-x (+ (ra/get-val pan-x) (ra/get-val pinch-x))
-        max-offset-x  (utils/get-max-offset width screen-width (ra/get-val scale))
+        curr-offset-x (+ (reanimated/get-shared-value pan-x) (reanimated/get-shared-value pinch-x))
+        max-offset-x  (utils/get-max-offset width screen-width (reanimated/get-shared-value scale))
         max-offset-x  (if (neg? curr-offset-x) (- max-offset-x) max-offset-x)]
-    (when (and (> (ra/get-val scale) y-threshold-scale)
-               (< (ra/get-val scale) c/max-scale)
+    (when (and (> (reanimated/get-shared-value scale) y-threshold-scale)
+               (< (reanimated/get-shared-value scale) c/max-scale)
                (> (Math/abs curr-offset-y) (Math/abs max-offset-y)))
-      (ra/animate pinch-y c/init-offset)
-      (ra/set-val pinch-y-start c/init-offset)
-      (ra/animate pan-y max-offset-y)
-      (ra/set-val pan-y-start max-offset-y))
-    (when (and (> (ra/get-val scale) x-threshold-scale)
-               (< (ra/get-val scale) c/max-scale)
+      (reanimated/set-shared-value pinch-y (reanimated/with-timing c/init-offset))
+      (reanimated/set-shared-value pinch-y-start c/init-offset)
+      (reanimated/set-shared-value pan-y (reanimated/with-timing max-offset-y))
+      (reanimated/set-shared-value pan-y-start max-offset-y))
+    (when (and (> (reanimated/get-shared-value scale) x-threshold-scale)
+               (< (reanimated/get-shared-value scale) c/max-scale)
                (> (Math/abs curr-offset-x) (Math/abs max-offset-x)))
-      (ra/animate pinch-x c/init-offset)
-      (ra/set-val pinch-x-start c/init-offset)
-      (ra/animate pan-x max-offset-x)
-      (ra/set-val pan-x-start max-offset-x))
-    (reset! pan-x-enabled? (> (ra/get-val scale) x-threshold-scale))
-    (reset! pan-y-enabled? (> (ra/get-val scale) y-threshold-scale))
+      (reanimated/set-shared-value pinch-x (reanimated/with-timing c/init-offset))
+      (reanimated/set-shared-value pinch-x-start c/init-offset)
+      (reanimated/set-shared-value pan-x (reanimated/with-timing max-offset-x))
+      (reanimated/set-shared-value pan-x-start max-offset-x))
+    (reset! pan-x-enabled? (> (reanimated/get-shared-value scale) x-threshold-scale))
+    (reset! pan-y-enabled? (> (reanimated/get-shared-value scale) y-threshold-scale))
     (when platform/android?
-      (rf/dispatch [:chat.ui/lightbox-scale (ra/get-val saved-scale)]))))
+      (rf/dispatch [:chat.ui/lightbox-scale (reanimated/get-shared-value saved-scale)]))))
 
 (defn pinch-gesture
   [{:keys [width height screen-height screen-width x-threshold-scale y-threshold-scale] :as dimensions}
@@ -86,41 +86,48 @@
                         (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") (ra/get-val saved-scale))
-                               scale-diff  (utils/get-scale-diff new-scale (ra/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)
-                                      (= (ra/get-val pinch-x-max) js/Infinity))
-                             (ra/set-val pinch-x-max (ra/get-val pinch-x))
-                             (ra/set-val pinch-y-max (ra/get-val pinch-y)))
-                           (ra/set-val pinch-x (+ new-pinch-x (ra/get-val pinch-x-start)))
-                           (ra/set-val pinch-y (+ new-pinch-y (ra/get-val pinch-y-start)))
-                           (ra/set-val scale new-scale))))
+    (gesture/on-update
+     (fn [e]
+       (let [new-scale   (* (oget e "scale") (reanimated/get-shared-value saved-scale))
+             scale-diff  (utils/get-scale-diff new-scale (reanimated/get-shared-value 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)
+                    (= (reanimated/get-shared-value pinch-x-max) js/Infinity))
+           (reanimated/set-shared-value pinch-x-max (reanimated/get-shared-value pinch-x))
+           (reanimated/set-shared-value pinch-y-max (reanimated/get-shared-value pinch-y)))
+         (reanimated/set-shared-value pinch-x
+                                      (+ new-pinch-x (reanimated/get-shared-value pinch-x-start)))
+         (reanimated/set-shared-value pinch-y
+                                      (+ new-pinch-y (reanimated/get-shared-value pinch-y-start)))
+         (reanimated/set-shared-value scale new-scale))))
     (gesture/on-end
      (fn []
        (cond
-         (< (ra/get-val scale) c/min-scale)
+         (< (reanimated/get-shared-value scale) c/min-scale)
          (rescale c/min-scale)
-         (> (ra/get-val scale) c/max-scale)
+         (> (reanimated/get-shared-value scale) c/max-scale)
          (do
-           (ra/animate pinch-x (ra/get-val pinch-x-max))
-           (ra/set-val pinch-x-start (ra/get-val pinch-x-max))
-           (ra/set-val pinch-x-max js/Infinity)
-           (ra/animate pinch-y (ra/get-val pinch-y-max))
-           (ra/set-val pinch-y-start (ra/get-val pinch-y-max))
-           (ra/set-val pinch-y-max js/Infinity)
-           (ra/animate scale c/max-scale)
-           (ra/set-val saved-scale c/max-scale))
+           (reanimated/set-shared-value pinch-x
+                                        (reanimated/with-timing (reanimated/get-shared-value
+                                                                 pinch-x-max)))
+           (reanimated/set-shared-value pinch-x-start (reanimated/get-shared-value pinch-x-max))
+           (reanimated/set-shared-value pinch-x-max js/Infinity)
+           (reanimated/set-shared-value pinch-y
+                                        (reanimated/with-timing (reanimated/get-shared-value
+                                                                 pinch-y-max)))
+           (reanimated/set-shared-value pinch-y-start (reanimated/get-shared-value pinch-y-max))
+           (reanimated/set-shared-value pinch-y-max js/Infinity)
+           (reanimated/set-shared-value scale (reanimated/with-timing c/max-scale))
+           (reanimated/set-shared-value saved-scale c/max-scale))
          :else
          (do
-           (ra/set-val saved-scale (ra/get-val scale))
-           (ra/set-val pinch-x-start (ra/get-val pinch-x))
-           (ra/set-val pinch-y-start (ra/get-val pinch-y))
-           (when (< (ra/get-val scale) x-threshold-scale)
+           (reanimated/set-shared-value saved-scale (reanimated/get-shared-value scale))
+           (reanimated/set-shared-value pinch-x-start (reanimated/get-shared-value pinch-x))
+           (reanimated/set-shared-value pinch-y-start (reanimated/get-shared-value pinch-y))
+           (when (< (reanimated/get-shared-value scale) x-threshold-scale)
              (utils/center-x animations false))
-           (when (< (ra/get-val scale) y-threshold-scale)
+           (when (< (reanimated/get-shared-value scale) y-threshold-scale)
              (utils/center-y animations false))))
        (finalize-pinch dimensions animations props)))))
 
@@ -134,28 +141,33 @@
     (gesture/enabled @pan-x-enabled?)
     (gesture/average-touches false)
     (gesture/on-update (fn [e]
-                         (ra/set-val pan-x (+ (ra/get-val pan-x-start) (oget e "translationX")))))
+                         (reanimated/set-shared-value pan-x
+                                                      (+ (reanimated/get-shared-value pan-x-start)
+                                                         (oget e "translationX")))))
     (gesture/on-end
      (fn [e]
-       (let [curr-offset (+ (ra/get-val pan-x) (ra/get-val pinch-x-start))
-             max-offset  (utils/get-max-offset width screen-width (ra/get-val scale))
+       (let [curr-offset (+ (reanimated/get-shared-value pan-x)
+                            (reanimated/get-shared-value pinch-x-start))
+             max-offset  (utils/get-max-offset width screen-width (reanimated/get-shared-value scale))
              max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
              velocity    (* (oget e "velocityX") c/velocity-factor)]
          (cond
-           (< (ra/get-val scale) x-threshold-scale)
+           (< (reanimated/get-shared-value scale) x-threshold-scale)
            (rescale c/min-scale)
            (> (Math/abs curr-offset) (Math/abs max-offset))
            (do
-             (ra/animate pan-x max-offset)
-             (ra/set-val pan-x-start max-offset)
-             (ra/animate pinch-x c/init-offset)
-             (ra/set-val pinch-x-start c/init-offset))
+             (reanimated/set-shared-value pan-x (reanimated/with-timing max-offset))
+             (reanimated/set-shared-value pan-x-start max-offset)
+             (reanimated/set-shared-value pinch-x (reanimated/with-timing c/init-offset))
+             (reanimated/set-shared-value pinch-x-start c/init-offset))
            :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (ra/get-val pinch-x-start))
-                 upper-bound (- (Math/abs max-offset) (ra/get-val pinch-x-start))]
-             (ra/set-val pan-x-start (ra/get-val pan-x))
-             (ra/animate-decay pan-x velocity [lower-bound upper-bound])
-             (ra/animate-decay pan-x-start velocity [lower-bound upper-bound]))))))))
+           (let [lower-bound (- (- (Math/abs max-offset)) (reanimated/get-shared-value pinch-x-start))
+                 upper-bound (- (Math/abs max-offset) (reanimated/get-shared-value pinch-x-start))]
+             (reanimated/set-shared-value pan-x-start (reanimated/get-shared-value pan-x))
+             (reanimated/animate-shared-value-with-decay pan-x velocity [lower-bound upper-bound])
+             (reanimated/animate-shared-value-with-decay pan-x-start
+                                                         velocity
+                                                         [lower-bound upper-bound]))))))))
 
 
 (defn pan-y-gesture
@@ -168,28 +180,33 @@
     (gesture/enabled @pan-y-enabled?)
     (gesture/average-touches false)
     (gesture/on-update (fn [e]
-                         (ra/set-val pan-y (+ (ra/get-val pan-y-start) (oget e "translationY")))))
+                         (reanimated/set-shared-value pan-y
+                                                      (+ (reanimated/get-shared-value pan-y-start)
+                                                         (oget e "translationY")))))
     (gesture/on-end
      (fn [e]
-       (let [curr-offset (+ (ra/get-val pan-y) (ra/get-val pinch-y-start))
-             max-offset  (utils/get-max-offset height screen-height (ra/get-val scale))
+       (let [curr-offset (+ (reanimated/get-shared-value pan-y)
+                            (reanimated/get-shared-value pinch-y-start))
+             max-offset  (utils/get-max-offset height screen-height (reanimated/get-shared-value scale))
              max-offset  (if (neg? curr-offset) (- max-offset) max-offset)
              velocity    (* (oget e "velocityY") c/velocity-factor)]
          (cond
-           (< (ra/get-val scale) y-threshold-scale)
+           (< (reanimated/get-shared-value scale) y-threshold-scale)
            (rescale c/min-scale)
            (> (Math/abs curr-offset) (Math/abs max-offset))
            (do
-             (ra/animate pan-y max-offset)
-             (ra/set-val pan-y-start max-offset)
-             (ra/animate pinch-y c/init-offset)
-             (ra/set-val pinch-y-start c/init-offset))
+             (reanimated/set-shared-value pan-y (reanimated/with-timing max-offset))
+             (reanimated/set-shared-value pan-y-start max-offset)
+             (reanimated/set-shared-value pinch-y (reanimated/with-timing c/init-offset))
+             (reanimated/set-shared-value pinch-y-start c/init-offset))
            :else
-           (let [lower-bound (- (- (Math/abs max-offset)) (ra/get-val pinch-y-start))
-                 upper-bound (- (Math/abs max-offset) (ra/get-val pinch-y-start))]
-             (ra/set-val pan-y-start (ra/get-val pan-y))
-             (ra/animate-decay pan-y velocity [lower-bound upper-bound])
-             (ra/animate-decay pan-y-start velocity [lower-bound upper-bound]))))))))
+           (let [lower-bound (- (- (Math/abs max-offset)) (reanimated/get-shared-value pinch-y-start))
+                 upper-bound (- (Math/abs max-offset) (reanimated/get-shared-value pinch-y-start))]
+             (reanimated/set-shared-value pan-y-start (reanimated/get-shared-value pan-y))
+             (reanimated/animate-shared-value-with-decay pan-y velocity [lower-bound upper-bound])
+             (reanimated/animate-shared-value-with-decay pan-y-start
+                                                         velocity
+                                                         [lower-bound upper-bound]))))))))
 
 (defn zoomable-image
   [{:keys [image-width image-height content message-id]} index border-radius on-tap]
@@ -203,20 +220,20 @@
              curr-orientation     (or (rf/sub [:lightbox/orientation]) orientation/portrait)
              focused?             (= shared-element-id message-id)
              dimensions           (utils/get-dimensions image-width image-height curr-orientation)
-             animations           {:scale         (ra/use-val initial-scale)
-                                   :saved-scale   (ra/use-val initial-scale)
-                                   :pan-x-start   (ra/use-val c/init-offset)
-                                   :pan-x         (ra/use-val c/init-offset)
-                                   :pan-y-start   (ra/use-val c/init-offset)
-                                   :pan-y         (ra/use-val c/init-offset)
-                                   :pinch-x-start (ra/use-val c/init-offset)
-                                   :pinch-x       (ra/use-val c/init-offset)
-                                   :pinch-y-start (ra/use-val c/init-offset)
-                                   :pinch-y       (ra/use-val c/init-offset)
-                                   :pinch-x-max   (ra/use-val js/Infinity)
-                                   :pinch-y-max   (ra/use-val js/Infinity)
-                                   :rotate        (ra/use-val c/init-rotation)
-                                   :rotate-scale  (ra/use-val c/min-scale)}
+             animations           {:scale         (reanimated/use-shared-value initial-scale)
+                                   :saved-scale   (reanimated/use-shared-value initial-scale)
+                                   :pan-x-start   (reanimated/use-shared-value c/init-offset)
+                                   :pan-x         (reanimated/use-shared-value c/init-offset)
+                                   :pan-y-start   (reanimated/use-shared-value c/init-offset)
+                                   :pan-y         (reanimated/use-shared-value c/init-offset)
+                                   :pinch-x-start (reanimated/use-shared-value c/init-offset)
+                                   :pinch-x       (reanimated/use-shared-value c/init-offset)
+                                   :pinch-y-start (reanimated/use-shared-value c/init-offset)
+                                   :pinch-y       (reanimated/use-shared-value c/init-offset)
+                                   :pinch-x-max   (reanimated/use-shared-value js/Infinity)
+                                   :pinch-y-max   (reanimated/use-shared-value js/Infinity)
+                                   :rotate        (reanimated/use-shared-value c/init-rotation)
+                                   :rotate-scale  (reanimated/use-shared-value c/min-scale)}
              props                {:pan-x-enabled? (reagent/atom false)
                                    :pan-y-enabled? (reagent/atom false)
                                    :focal-x        (reagent/atom nil)
@@ -230,10 +247,13 @@
            (utils/handle-orientation-change curr-orientation focused? dimensions animations props)
            (utils/handle-exit-lightbox-signal exit-lightbox-signal
                                               index
-                                              (ra/get-val (:scale animations))
+                                              (reanimated/get-shared-value (:scale animations))
                                               rescale
                                               set-full-height?))
-         (utils/handle-zoom-out-signal zoom-out-signal index (ra/get-val (:scale animations)) rescale)
+         (utils/handle-zoom-out-signal zoom-out-signal
+                                       index
+                                       (reanimated/get-shared-value (:scale animations))
+                                       rescale)
          [:f>
           (fn []
             (let [tap               (tap-gesture on-tap)