discord-decomp/modules/voice_panel/native/controls/VoicePanelFloatingCTAContainer.tsx

// Metro module 15999 (f16000).
import { useContext, useMemo } from "react";
import ChannelStore from "../../../../stores/ChannelStore";
import { UI_SHOW_HIDE_PHYSICS, MODE_CHANGE_PHYSICS } from "../../VoicePanelConstants";
import { CALL_TILE_GUTTER } from "../card/VoicePanelCardConstants";
import { ThemeTypes } from "../../../../_bundle/Module505";
import { resolveRefreshToken } from "../../../themes/experiments/MobileVisualRefreshExperiment";
import Module712 from "../../../../_bundle/Module712";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
import { RowButton } from "../../../../design/components/TableRow/native/RowButton.native";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
import VoicePanelStateContext from "../VoicePanelStateContext";
import useChannelFloatingCTAContent from "../../../video_calls/native/useChannelFloatingCTAContent";
import { useGetDismissibleContent } from "../../../dismissible_content/useGetDismissibleContent";
import { useStateFromStores } from "../../../../_bundle/defaultAreStatesEqual";
import { getDismissableCTAProps, useFloatingCTAProps } from "./utils/VoicePanelFloatingCTAUtils";
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import * as _VoicePanelControlsUtils from "../utils/VoicePanelControlsUtils";
import * as _TransitionGroup from "../../../../design/components/TransitionGroup/TransitionGroup";
import roundToNearestPixel from "../utils/roundToNearestPixel";
import * as _spring from "../../../../design/animation/reanimated/spring/spring";
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
import SelectedDismissibleContent from "../../../dismissible_content/native/SelectedDismissibleContent";
let useStyles, OPACITY_CHANGE_PHYSICS, __initData, __initData2, VoicePanelFloatingCTAContainer;
const FloatingCTA = function FloatingCTA(props) {
  const { trailing, ...rest } = props;
  return <Stack>
    <RowButton experimental_withBlurBackground arrow={trailing == null} trailing={trailing} {...rest} />
  </Stack>;
};
VoicePanelFloatingCTAContainer = function VoicePanelFloatingCTAContainer(props) {
  let memo;
  const { wrapperSpecs, accessoryHeights, controlsSpecs, state, cleanUp, gestureState } = props;
  memo = void 0;
  const styles = useStyles();
  const context = useContext(VoicePanelStateContext);
  const { windowDimensions, channelId, safeArea } = context;
  const channelFloatingCTAContent = useChannelFloatingCTAContent(channelId);
  const [dismissableContent] = useGetDismissibleContent(channelFloatingCTAContent);
  const stateFromStores = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
  memo = useMemo(() => getDismissableCTAProps({
    dismissableContent,
    channel: stateFromStores
  }), [dismissableContent, stateFromStores]);
  const floatingCTAProps = useFloatingCTAProps(stateFromStores);
  const A = function A() {
    let r37, r87, transform;
    const controlsDefaultWidth = _VoicePanelControlsUtils.getControlsDefaultWidth(windowDimensions.get().width, safeArea.get().left, safeArea.get().right);
    const r1 = state === _TransitionGroup.TransitionStates.YEETED ? 0 : 1;
    L7: {
      L6: {
        r37 = {
          bottom: controlsSpecs.get().height + 16,
          width: controlsDefaultWidth,
          marginLeft: -1 * roundToNearestPixel(controlsDefaultWidth / 2),
          opacity: null,
          transform: null
        };
        const t = function t(a0) {
          if (a0 ? state === _TransitionGroup.TransitionStates.YEETED : a0) {
            _ReanimatedRexport.runOnJS(cleanUp)();
          }
        };
        t.__closure = {
          state,
          TransitionStates: _TransitionGroup.TransitionStates,
          runOnJS: _ReanimatedRexport.runOnJS,
          cleanUp
        };
        t.__workletHash = 7334460639890;
        t.__initData = __initData2;
        r37.opacity = _spring.withSpring(r1, OPACITY_CHANGE_PHYSICS, "respect-motion-settings", t);
        transform = [{
          translateX: _spring.withSpring(wrapperSpecs.get().x, UI_SHOW_HIDE_PHYSICS)
        }, ,];
        if (!wrapperSpecs.get().hidden) {
          if (gestureState.get().active && !gestureState.get().requiresPop) {
            break L6;
          }
          r87 = wrapperSpecs.get().y;
          break L7;
        }
      }
      r87 = wrapperSpecs.get().height + CALL_TILE_GUTTER + accessoryHeights.get();
    }
    transform[1] = {
      translateY: _spring.withSpring(r87, UI_SHOW_HIDE_PHYSICS)
    };
    r37.transform = transform;
    return r37;
  };
  A.__closure = {
    getControlsDefaultWidth: _VoicePanelControlsUtils.getControlsDefaultWidth,
    windowDimensions,
    safeArea,
    state,
    TransitionStates: _TransitionGroup.TransitionStates,
    controlsSpecs,
    roundToNearestPixel,
    withSpring: _spring.withSpring,
    OPACITY_CHANGE_PHYSICS,
    runOnJS: _ReanimatedRexport.runOnJS,
    cleanUp,
    wrapperSpecs,
    UI_SHOW_HIDE_PHYSICS,
    gestureState,
    CALL_TILE_GUTTER,
    accessoryHeights
  };
  A.__workletHash = 3338259366067;
  A.__initData = __initData;
  return <ReanimatedNativeView style={[styles.container, useAnimatedStyle(A)]}>
    {memo != null ? <SelectedDismissibleContent contentTypes={channelFloatingCTAContent}>
      {() => <FloatingCTA {...memo} />}
    </SelectedDismissibleContent> : floatingCTAProps != null ? <FloatingCTA {...floatingCTAProps} /> : null}
  </ReanimatedNativeView>;
};
useStyles = createStyles({
  container: {
    zIndex: 1,
    position: "absolute",
    bottom: 0,
    left: "50%",
    overflow: "hidden",
    alignItems: "center",
    borderRadius: Module712.radii.lg
  }
});
OPACITY_CHANGE_PHYSICS = {
  ...MODE_CHANGE_PHYSICS,
  overshootClamping: true
};
__initData = {
  code: "function VoicePanelFloatingCTAContainerTsx1(){const{getControlsDefaultWidth,windowDimensions,safeArea,state,TransitionStates,controlsSpecs,roundToNearestPixel,withSpring,OPACITY_CHANGE_PHYSICS,runOnJS,cleanUp,wrapperSpecs,UI_SHOW_HIDE_PHYSICS,gestureState,CALL_TILE_GUTTER,accessoryHeights}=this.__closure;const width=getControlsDefaultWidth(windowDimensions.get().width,safeArea.get().left,safeArea.get().right);const opacity=state===TransitionStates.YEETED?0:1;return{bottom:controlsSpecs.get().height+16,width:width,marginLeft:roundToNearestPixel(width/2)*-1,opacity:withSpring(opacity,OPACITY_CHANGE_PHYSICS,'respect-motion-settings',function(finished){if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}),transform:[{translateX:withSpring(wrapperSpecs.get().x,UI_SHOW_HIDE_PHYSICS)},{translateY:withSpring(wrapperSpecs.get().hidden||gestureState.get().active&&!gestureState.get().requiresPop?wrapperSpecs.get().height+CALL_TILE_GUTTER+accessoryHeights.get():wrapperSpecs.get().y,UI_SHOW_HIDE_PHYSICS)}]};}"
};
__initData2 = {
  code: "function VoicePanelFloatingCTAContainerTsx2(finished){const{state,TransitionStates,runOnJS,cleanUp}=this.__closure;if(finished&&state===TransitionStates.YEETED){runOnJS(cleanUp)();}}"
};
export default VoicePanelFloatingCTAContainer;
export function getFloatingCTATotalViewHeight(a0) {
  return resolveRefreshToken(Module712.modules.mobile.TABLE_ROW_HEIGHT, a0) + 16;
}
export function renderVoicePanelFloatingCTA(a0, a1, a2, a3) {
  return <ThemeContextProvider key={a0} theme={ThemeTypes.DARK}>
    <VoicePanelFloatingCTAContainer {...a1} state={a2} cleanUp={a3} />
  </ThemeContextProvider>;
}