Change Details

https://linear.app/comm/issue/ENG-8154/convert-videoplaybackmodal-to-reanimated-2-syntax I tried to split this diff into parts somehow, but it doesn’t look like it’s possible: if one part is migrated then any parts that use or are used by this parts must be migrated as well. - I used a new gesture-handler API, because it works well with Reanimated v2 API and allows for a much shorter and readable code. However there are some problems with flow definitions and it’s not a quick fix so created a task for that: https://linear.app/comm/issue/ENG-10079/add-react-native-gesture-handler-v2-flow-definitions and for now I added FlowFixMe comment - Instead of `TapGestureHandler` there is now a `GestureDetector` that allows us to set a callback (`onEnd`) if a tap gesture ends so there is no need for checking if gesture has ended with `gestureJustEnded` function and no need for tracking the last tap coordinates (they’re just passed via callback) - `toggleControls`: I simplified it by using `useAnimatedReaction` but it does the exact same thing: tracks `ceil(activeControlsOpacity)` and if ceiling changes it calls enable/disable controls - `animateTowards`: this function is only used in this component. As far as I understand it, it animates a reanimated value towards a given target value with linear interpolation. And if for example the current value is 0.5 and it animates toward 1, it will animate in half of full animation length, so the speed of the animation is always the same. It does that by looking at how much time passed from the last frame and increasing/decreasing value accordingly. 
In this case the animation is only 150ms so it will not be noticeable anyway (I checked it, I was clicking quickly in my simulator but there is no noticeable difference), so I deleted this function and just used `withTiming`. We can implement the behavior from `animateTowards` by calculating the duration based on current value and setting easing to linear but in my opinion it’s not worth it. - `updates` and `updated*` variables: `toggleControls` is now handled by `useAnimatedReaction` so it can be removed from `updates`. As for setting `curBackdropOpacity` to `progressiveOpacity` I don’t know what the author meant here: `progressiveOpacity` was used just to update `curBackdropOpacity` so we might rename it to `curBackdropOpacity` and have the same effect. And so we can get rid of `updates` and `updated*` values. - All other changes are straighforward: changing `useValue` to `useSharedValue`, using `useAnimatedStyle` and calculate stuff there and in worklets instead of using animated nodes

https://linear.app/comm/issue/ENG-8154/convert-videoplaybackmodal-to-reanimated-2-syntax I tried to split this diff into parts somehow, but it doesn’t look like it’s possible: if one part is migrated then any parts that use or are used by this parts must be migrated as well. - I used a new gesture-handler API, because it works well with Reanimated v2 API and allows for a much shorter and readable code. However there are some problems with flow definitions and it’s not a quick fix so created a task for that: https://linear.app/comm/issue/ENG-10079/add-react-native-gesture-handler-v2-flow-definitions and for now I added FlowFixMe comment - Instead of `TapGestureHandler` there is now a `GestureDetector` that allows us to set a callback (`onEnd`) if a tap gesture ends so there is no need for checking if gesture has ended with `gestureJustEnded` function and no need for tracking the last tap coordinates (they’re just passed via callback) - `toggleControls`: I simplified it by using `useAnimatedReaction` but it does the exact same thing: tracks `ceil(activeControlsOpacity)` and if ceiling changes it calls enable/disable controls - `animateTowards`: this function is only used in this component. As far as I understand it, it animates a reanimated value towards a given target value with linear interpolation. And if for example the current value is 0.5 and it animates toward 1, it will animate in half of full animation length, so the speed of the animation is always the same. It does that by looking at how much time passed from the last frame and increasing/decreasing value accordingly. 
In this case the animation is only 150ms so it will not be noticeable anyway (I checked it, I was clicking quickly in my simulator but there is no noticeable difference), so I deleted this function and just used `withTiming`. We can implement the behavior from `animateTowards` by calculating the duration based on current value and setting easing to linear but in my opinion it’s not worth it. - `updates` and `updated*` variables: `toggleControls` is now handled by `useAnimatedReaction` so it can be removed from `updates`. As for setting `curBackdropOpacity` to `progressiveOpacity` I don’t know what the author meant here: `progressiveOpacity` was used just to update `curBackdropOpacity` so we might rename it to `curBackdropOpacity` and have the same effect. And so we can get rid of `updates` and `updated*` values. - All other changes are straighforward: changing `useValue` to `useSharedValue`, using `useAnimatedStyle` and calculate stuff there and in worklets instead of using animated nodes Depends on D14203

https://linear.app/comm/issue/ENG-8154/convert-videoplaybackmodal-to-reanimated-2-syntax I tried to split this diff into parts somehow, but it doesn’t look like it’s possible: if one part is migrated then any parts that use or are used by this parts must be migrated as well. - I used a new gesture-handler API, because it works well with Reanimated v2 API and allows for a much shorter and readable code. However there are some problems with flow definitions and it’s not a quick fix so created a task for that: https://linear.app/comm/issue/ENG-10079/add-react-native-gesture-handler-v2-flow-definitions and for now I added FlowFixMe comment - Instead of `TapGestureHandler` there is now a `GestureDetector` that allows us to set a callback (`onEnd`) if a tap gesture ends so there is no need for checking if gesture has ended with `gestureJustEnded` function and no need for tracking the last tap coordinates (they’re just passed via callback) - `toggleControls`: I simplified it by using `useAnimatedReaction` but it does the exact same thing: tracks `ceil(activeControlsOpacity)` and if ceiling changes it calls enable/disable controls - `animateTowards`: this function is only used in this component. As far as I understand it, it animates a reanimated value towards a given target value with linear interpolation. And if for example the current value is 0.5 and it animates toward 1, it will animate in half of full animation length, so the speed of the animation is always the same. It does that by looking at how much time passed from the last frame and increasing/decreasing value accordingly. 
In this case the animation is only 150ms so it will not be noticeable anyway (I checked it, I was clicking quickly in my simulator but there is no noticeable difference), so I deleted this function and just used `withTiming`. We can implement the behavior from `animateTowards` by calculating the duration based on current value and setting easing to linear but in my opinion it’s not worth it. - `updates` and `updated*` variables: `toggleControls` is now handled by `useAnimatedReaction` so it can be removed from `updates`. As for setting `curBackdropOpacity` to `progressiveOpacity` I don’t know what the author meant here: `progressiveOpacity` was used just to update `curBackdropOpacity` so we might rename it to `curBackdropOpacity` and have the same effect. And so we can get rid of `updates` and `updated*` values. - All other changes are straighforward: changing `useValue` to `useSharedValue`, using `useAnimatedStyle` and calculate stuff there and in worklets instead of using animated nodes Depends on D14203