discord-decomp/modules/voice_panel/native/pip/VoicePanelPIPPushToTalkOverlay.tsx

// Metro module 15988 (f15989).
import { useRef, useCallback, useMemo } from "react";
import { StyleSheet } from "react-native";
import { PUSH_TO_TALK_PIP_PHYSICS } from "../../VoicePanelConstants";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import NativeView from "../../../core/native/NativeView";
import { Icon } from "../../../../design/void/native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { setPushToTalkState } from "../../../media_engine/MediaEngineActionCreators";
import { usePIPState } from "./VoicePanelPIPStateContext";
import * as _spring from "../../../../design/animation/reanimated/spring/spring";
import * as _VoicePanelPIPUtils from "./VoicePanelPIPUtils";
import { GestureDetector, Gesture } from "../../../../_bundle/Module5273";
import Module15989 from "../../../../_bundle/Module15989";
const AnimatedComponent = ReanimatedRexport.createAnimatedComponent(NativeView);
const AnimatedComponent2 = ReanimatedRexport.createAnimatedComponent(Icon);
const hitSlop = {
  top: 6,
  bottom: 6,
  left: 6,
  right: 6
};
const useStyles = createStyles({
  iconContainer: {
    position: "absolute",
    width: 32,
    height: 32,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: Module712.radii.round
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: Module712.colors.BLACK
  }
});
const __initData = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx1(){const{isPushingToTalk,EXPANDED_ICON_SIZE,BASE_ICON_SIZE,withSpring,PUSH_TO_TALK_PIP_PHYSICS,white}=this.__closure;const padding=isPushingToTalk.get()?8*EXPANDED_ICON_SIZE/BASE_ICON_SIZE+8:8;return{right:withSpring(padding,PUSH_TO_TALK_PIP_PHYSICS),bottom:withSpring(padding,PUSH_TO_TALK_PIP_PHYSICS),transform:[{scale:withSpring(isPushingToTalk.get()?EXPANDED_ICON_SIZE/BASE_ICON_SIZE:1,PUSH_TO_TALK_PIP_PHYSICS)}],backgroundColor:withSpring(isPushingToTalk.get()?white:'rgba(0, 0, 0, 0.54)',PUSH_TO_TALK_PIP_PHYSICS)};}"
};
const __initData2 = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx2(){const{withSpring,isPushingToTalk,black,white,PUSH_TO_TALK_PIP_PHYSICS}=this.__closure;return{tintColor:withSpring(isPushingToTalk.get()?black:white,PUSH_TO_TALK_PIP_PHYSICS)};}"
};
const __initData3 = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx3(){const{withSpring,isPushingToTalk,PUSH_TO_TALK_PIP_PHYSICS,getVoicePanelPIPBorderRadius,pipState}=this.__closure;return{opacity:withSpring(isPushingToTalk.get()?0.5:0,PUSH_TO_TALK_PIP_PHYSICS),borderRadius:getVoicePanelPIPBorderRadius(pipState.width,pipState.height)};}"
};
const __initData4 = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx4(event,success){const{runOnJS,handlePushToTalk}=this.__closure;if(!success){return;}runOnJS(handlePushToTalk)(false);}"
};
const __initData5 = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx5(){const{runOnJS,handlePushToTalk}=this.__closure;runOnJS(handlePushToTalk)(false);}"
};
const __initData6 = {
  code: "function VoicePanelPIPPushToTalkOverlayTsx6(){const{runOnJS,handlePushToTalk}=this.__closure;runOnJS(handlePushToTalk)(true);}"
};
export default function VoicePanelPIPPushToTalkOverlay() {
  let c22696_1, WHITE, BLACK;
  const pIPState = usePIPState();
  const styles = useStyles();
  const sharedValue = useSharedValue(false);
  const ref = useRef(false);
  let [isPushingToTalk, handlePushToTalk] = [sharedValue, useCallback((a0) => {
    if (a0 !== ref.current) {
      ref.current = a0;
      setPushToTalkState(a0);
      sharedValue.set(a0);
    }
  }, [sharedValue])];
  c22696_1 = isPushingToTalk;
  WHITE = Module712.unsafe_rawColors.WHITE;
  BLACK = Module712.unsafe_rawColors.BLACK;
  const r46 = function() {
    const r0 = c22696_1.get() ? 20 : 8;
    return {
      right: _spring.withSpring(r0, PUSH_TO_TALK_PIP_PHYSICS),
      bottom: _spring.withSpring(r0, PUSH_TO_TALK_PIP_PHYSICS),
      transform: [{
        scale: _spring.withSpring(c22696_1.get() ? 1.5 : 1, PUSH_TO_TALK_PIP_PHYSICS)
      }],
      backgroundColor: _spring.withSpring(c22696_1.get() ? WHITE : "rgba(0, 0, 0, 0.54)", PUSH_TO_TALK_PIP_PHYSICS)
    };
  };
  r46.__closure = {
    isPushingToTalk,
    EXPANDED_ICON_SIZE: 48,
    BASE_ICON_SIZE: 32,
    withSpring: _spring.withSpring,
    PUSH_TO_TALK_PIP_PHYSICS,
    white: WHITE
  };
  r46.__workletHash = 3936373516983;
  r46.__initData = __initData;
  const animatedStyle = useAnimatedStyle(r46);
  const P = function P() {
    return {
      tintColor: _spring.withSpring(c22696_1.get() ? BLACK : WHITE, PUSH_TO_TALK_PIP_PHYSICS)
    };
  };
  P.__closure = {
    withSpring: _spring.withSpring,
    isPushingToTalk,
    black: BLACK,
    white: WHITE,
    PUSH_TO_TALK_PIP_PHYSICS
  };
  P.__workletHash = 11469896791985;
  P.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(P);
  const H = function H() {
    return {
      opacity: _spring.withSpring(c22696_1.get() ? 0.5 : 0, PUSH_TO_TALK_PIP_PHYSICS),
      borderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius(pIPState.width, pIPState.height)
    };
  };
  H.__closure = {
    withSpring: _spring.withSpring,
    isPushingToTalk,
    PUSH_TO_TALK_PIP_PHYSICS,
    getVoicePanelPIPBorderRadius: _VoicePanelPIPUtils.getVoicePanelPIPBorderRadius,
    pipState: pIPState
  };
  H.__workletHash = 450590017248;
  H.__initData = __initData3;
  return <>
    <AnimatedComponent pointerEvents="none" style={[styles.overlay, useAnimatedStyle(H)]} />
    <GestureDetector gesture={useMemo(() => {
      const r8 = Gesture.Tap().maxDistance(30);
      const r23 = function(a0, a1) {
        if (a1) {
          _ReanimatedRexport.runOnJS(handlePushToTalk)(false);
        }
      };
      r23.__closure = {
        runOnJS: _ReanimatedRexport.runOnJS,
        handlePushToTalk
      };
      r23.__workletHash = 13736796804739;
      r23.__initData = __initData4;
      const r29 = r8.onEnd(r23);
      const shouldCancelWhenOutside = Gesture.Pan().maxPointers(1).shouldCancelWhenOutside(false);
      const t = function t() {
        _ReanimatedRexport.runOnJS(handlePushToTalk)(true);
      };
      t.__closure = {
        runOnJS: _ReanimatedRexport.runOnJS,
        handlePushToTalk
      };
      t.__workletHash = 246779667986;
      t.__initData = __initData6;
      const r46 = shouldCancelWhenOutside.onBegin(t);
      const n = function n() {
        _ReanimatedRexport.runOnJS(handlePushToTalk)(false);
      };
      n.__closure = {
        runOnJS: _ReanimatedRexport.runOnJS,
        handlePushToTalk
      };
      n.__workletHash = 12223608557562;
      n.__initData = __initData5;
      return Gesture.Exclusive(r29, r46.onFinalize(n));
    }, [handlePushToTalk])}>
      <AnimatedComponent style={[styles.iconContainer, animatedStyle]} hitSlop={hitSlop}>
        <AnimatedComponent2 style={animatedStyle2} size={Icon.Sizes.SMALL_20} source={Module15989} disableColor />
      </AnimatedComponent>
    </GestureDetector>
  </>;
};