Refactor some of the animations in lightbox rotation to use derived values

[OmarBasem]

[OmarBasem]

Hi @Parveshdhull,

I have been trying to think about how to reimplement the zoomable-image file using useDerivedValue.

AFAIK we can use derive values to animate values that depend on each other, and that would always animate together (like a bar's width, and maybe also bg-color, can always depends on the progress).

Here in this file the main animations we have are: scale, pan-x, pan-y, pinch-x, pinch-y. They are all independent. It is possible to animate the image to the maximum scale, while all other values are 0. We can pan-x to the maximum possible offset, while pan-y, pinch-x and pinch-y are zero. And the scale can be anything. Updating these animations use different gesture events (focalX, focalY, translationX, translationY, scale, velocityX, velocityY). So I am not sure how can derived values be used here. Please let me know if you have any thoughts.

[Parveshdhull]

Hi @OmarBasem,
Thank you very much for looking into this.

So, first, let me give you some detail on how I understand the use of derived value. I think of them as action-reaction based.
If some particular action creates a reaction and always affects a few shared values in a specific way then we can just have a single shared value and all values can be derived from that.

For example, in the original comment, there was clearly a single action (changing of orientation) and it was always affecting all those shared values in the same way. So we can just use their orientation shared value and others as derived value.

About the zoomable-image file, I didn't quite look into how PanResponder and gesture etc. work. But you can apply the same concept there too.

If it is clear that the same concept doesn't work here, then feel free to skip refactoring for this file and we can only refactor src/status_im2/contexts/chat/lightbox/top_view.cljs. wdyt?

[OmarBasem]

I think of them as action-reaction based.

@Parveshdhull that's right, I think of them the same way. In the case of zooming and panning, it is a series of different actions, happening over a period of time, outputting unrelated events, so I believe that does not apply here.

As for the top_view I think deriveValues can work. The bottom_view and top_view designs in landscape mode will be finalized post MVP, so will refactor them when the designs are ready.