discord-decomp/modules/video_calls/native/components/FocusedControls.tsx

// Metro module 10685 (f10686).
import { memo, useContext } from "react";
import { StyleSheet, View } from "react-native";
import { AnalyticEvents } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import { STANDARD_EASING } from "../../../../design/void/native";
import ReanimatedRexport, { useDerivedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import useIsInvitedToSpeak from "../../../stage_channels/useIsInvitedToSpeak";
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
import { Svg, Defs, LinearGradient, Stop, Rect } from "../../../../_bundle/Module8531";
import { useGlobalStatusIndicatorState } from "../../../connectivity/native/useGlobalStatusIndicatorState";
import { useGlobalStatusIndicatorHeightSharedValue } from "../../../connectivity/native/components/GlobalStatusIndicator";
import { RevealContext } from "./RevealProvider";
import { useIsScreenReaderEnabled } from "../../../a11y/native/useIsScreenReaderEnabled.native";
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import useCurrentEmbeddedActivity from "../../../activities/utils/useCurrentEmbeddedActivity";
import FocusedControlsBottomControls from "./FocusedControlsBottomControls";
import AnalyticsUtils from "../../../../utils/AnalyticsUtils";
let useStyles, TIMING_CONFIG, __initData, __initData2, FocusedControlsHeaderGradient, __initData3, __initData4, __initData5;
const FocusedControlsHeader = function FocusedControlsHeader(props) {
  let derivedValue;
  const { header, reveal, isTouchingLeftScreenEdge } = props;
  derivedValue = void 0;
  const styles = useStyles();
  const l = function l() {
    return reveal ? 0 : -54;
  };
  l.__closure = {
    reveal,
    FOCUSED_CONTROLS_HEADER_HEIGHT: 54
  };
  l.__workletHash = 15509217225804;
  l.__initData = __initData;
  derivedValue = useDerivedValue(l);
  const isInvitedToSpeak = useIsInvitedToSpeak();
  const c = function c() {
    return {
      transform: [{
        translateY: _timing.withTiming(derivedValue.get(), TIMING_CONFIG)
      }]
    };
  };
  c.__closure = {
    withTiming: _timing.withTiming,
    offsetY: derivedValue,
    TIMING_CONFIG
  };
  c.__workletHash = 12710345257882;
  c.__initData = __initData2;
  return <ReanimatedRexport.View style={useAnimatedStyle(c)}>
    <SafeAreaPaddingView top={!isInvitedToSpeak} left={isTouchingLeftScreenEdge} right>
      <View style={styles.headerContainer}>{header}</View>
    </SafeAreaPaddingView>
  </ReanimatedRexport.View>;
};
FocusedControlsHeaderGradient = function FocusedControlsHeaderGradient() {
  const styles = useStyles();
  const width = useWindowDimensions_native().width;
  return <View style={[styles.backgroundGradient, {
    width
  }]}>
    <Svg height="100%" width={width}>
      <Defs>
        <LinearGradient id="grad" y1="0%" x1="0" x2="0" y2="100%">
          <Stop offset="0%" stopColor="black" stopOpacity=".8" />
          <Stop offset="66%" stopColor="black" stopOpacity=".51" />
          <Stop offset="100%" stopColor="black" stopOpacity="0" />
        </LinearGradient>
      </Defs>
      <Rect height="100%" width={width} fill="url(#grad)" />
    </Svg>
  </View>;
};
useStyles = createStyles({
  backgroundGradient: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    height: 130
  },
  headerContainer: {
    position: "relative",
    height: 54
  }
});
TIMING_CONFIG = {
  easing: STANDARD_EASING,
  duration: 250
};
__initData = {
  code: "function FocusedControlsTsx1(){const{reveal,FOCUSED_CONTROLS_HEADER_HEIGHT}=this.__closure;return reveal?0:-FOCUSED_CONTROLS_HEADER_HEIGHT;}"
};
__initData2 = {
  code: "function FocusedControlsTsx2(){const{withTiming,offsetY,TIMING_CONFIG}=this.__closure;return{transform:[{translateY:withTiming(offsetY.get(),TIMING_CONFIG)}]};}"
};
__initData3 = {
  code: "function FocusedControlsTsx3(){const{isInvitedToSpeak,statusIndicatorHeight}=this.__closure;return isInvitedToSpeak?statusIndicatorHeight.get():0;}"
};
__initData4 = {
  code: "function FocusedControlsTsx4(){const{reveal}=this.__closure;return reveal?1:0;}"
};
__initData5 = {
  code: "function FocusedControlsTsx5(){const{withTiming,top,TIMING_CONFIG,revealOpacity}=this.__closure;return{top:withTiming(top.get(),TIMING_CONFIG),opacity:withTiming(revealOpacity.get(),TIMING_CONFIG)};}"
};
const r47 = memo(function(a0) {
  const { header, expandedControls, actionBar, children, forceReveal = false, disableGradient = false } = a0;
  let derivedValue2, derivedValue3, analyticsLocations, c18192_7;
  let containerStyle = a0.containerStyle;
  const { omitPTT, bottomHeader, onDrawerClose, channel, isTouchingLeftScreenEdge } = a0;
  derivedValue2 = void 0;
  derivedValue3 = void 0;
  analyticsLocations = void 0;
  c18192_7 = void 0;
  const globalStatusIndicatorHeightSharedValue = useGlobalStatusIndicatorHeightSharedValue(useGlobalStatusIndicatorState());
  const isInvitedToSpeak = useIsInvitedToSpeak();
  let c18192_2 = isInvitedToSpeak;
  let reveal2 = useContext(RevealContext).reveal;
  const isScreenReaderEnabled2 = useIsScreenReaderEnabled();
  if (!reveal2) {
    reveal2 = forceReveal;
  }
  if (!reveal2) {
    reveal2 = isScreenReaderEnabled2;
  }
  const isScreenReaderEnabled = reveal2;
  const D = function D() {
    return c18192_2 ? globalStatusIndicatorHeightSharedValue.get() : 0;
  };
  D.__closure = {
    isInvitedToSpeak,
    statusIndicatorHeight: globalStatusIndicatorHeightSharedValue
  };
  D.__workletHash = 14833624951450;
  D.__initData = __initData3;
  derivedValue2 = useDerivedValue(D);
  const F = function F() {
    return isScreenReaderEnabled ? 1 : 0;
  };
  F.__closure = {
    reveal: isScreenReaderEnabled
  };
  F.__workletHash = 15022275245977;
  F.__initData = __initData4;
  derivedValue3 = useDerivedValue(F);
  const y = function y() {
    return {
      top: _timing.withTiming(derivedValue2.get(), TIMING_CONFIG),
      opacity: _timing.withTiming(derivedValue3.get(), TIMING_CONFIG)
    };
  };
  y.__closure = {
    withTiming: _timing.withTiming,
    top: derivedValue2,
    TIMING_CONFIG,
    revealOpacity: derivedValue3
  };
  y.__workletHash = 8532538341439;
  y.__initData = __initData5;
  const animatedStyle = useAnimatedStyle(y);
  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.FOCUSED_VOICE_CONTROLS).analyticsLocations;
  c18192_7 = useCurrentEmbeddedActivity();
  if (containerStyle == null) {
    containerStyle = StyleSheet.absoluteFill;
  }
  return <ReanimatedRexport.View style={[containerStyle, animatedStyle]} pointerEvents={isScreenReaderEnabled ? "box-none" : "none"}>
    {disableGradient ? null : <FocusedControlsHeaderGradient />}
    <FocusedControlsHeader header={header} reveal={isScreenReaderEnabled} isTouchingLeftScreenEdge={isTouchingLeftScreenEdge} />
    {actionBar != null ? expandedControls != null ? <FocusedControlsBottomControls onDrawerOpen={function onDrawerOpen() {
      const VOICE_BOTTOM_SHEET_EXPANDED = AnalyticEvents.VOICE_BOTTOM_SHEET_EXPANDED;
      AnalyticsUtils.track(VOICE_BOTTOM_SHEET_EXPANDED, {
        channel_id: channel.id,
        guild_id: channel.guild_id,
        application_id: c18192_7?.applicationId,
        activity_session_id: c18192_7?.compositeInstanceId,
        location_stack: analyticsLocations
      });
    }} omitPTT={omitPTT} actionBar={actionBar} expandedControls={expandedControls} header={bottomHeader} onDrawerClose={onDrawerClose} reveal={isScreenReaderEnabled}>{children}</FocusedControlsBottomControls> : null : null}
  </ReanimatedRexport.View>;
});
export default r47;
export const FOCUSED_CONTROLS_HEADER_HEIGHT = 54;