discord-decomp/modules/voice_channel_effects/native/AnimatedEffectEmoji.tsx

// Metro module 10600 (f10601).
import { useEffect } from "react";
import { View } from "react-native";
import AccessibilityStore from "../../a11y/AccessibilityStore";
import Durations from "../../../utils/Durations";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import FastImage from "../../../components_native/common/FastImage";
import * as _native from "../../../design/void/native";
import { LegacyText, generateBoxShadowStyle, EIGHT_DP_ELEVATION_SHADOW_PARAMS } from "../../../design/void/native";
import { useStateFromStores } from "../../../_bundle/Module589";
import * as _ReanimatedRexport from "../../reanimated/ReanimatedRexport";
import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
import * as _timing from "../../../design/animation/reanimated/timing/timing";
import { getEffectUrl } from "../VoiceChannelEffectsUtils";
let c7109_7, c7109_8, useStyles, __initData;
const Emoji = function Emoji(props) {
  const { url, surrogates } = props;
  const styles = useStyles();
  return url !== "" ? <FastImage resizeMode="contain" style={[styles.imageEmoji]} source={{
    uri: url
  }} /> : <LegacyText style={[styles.textEmoji]} allowFontScaling={false}>{surrogates}</LegacyText>;
};
c7109_7 = 6 * Durations.Millis.SECOND;
c7109_8 = 2 * Durations.Millis.SECOND;
useStyles = createStyles({
  voiceChannelEffectEmojiContainer: {
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    borderRadius: Module712.radii.round,
    position: "absolute",
    right: 16,
    top: 16
  },
  voiceChannelEffectEmojiContainerTileNotch: {
    right: "auto",
    left: 16
  },
  voiceChannelEffectEmoji: {
    padding: 12
  },
  textEmoji: {
    fontSize: 32,
    lineHeight: 38,
    alignContent: "center",
    justifyContent: "center",
    display: "flex",
    width: 32,
    height: 32
  },
  imageEmoji: {
    width: 32,
    height: 32
  }
});
__initData = {
  code: "function AnimatedEffectEmojiTsx1(){const{withSequence,withTiming,ANIMATION_ROTATION_DEG,withDelay,useReducedMotion,STANDARD_EASING}=this.__closure;const rotate=withSequence(withTiming(ANIMATION_ROTATION_DEG+\"deg\",{duration:0}),withDelay(100,withTiming('0deg',{duration:useReducedMotion?0:300,easing:STANDARD_EASING})));const scale=withSequence(withTiming(0,{duration:0}),withDelay(100,withTiming(1,{duration:useReducedMotion?0:300,easing:STANDARD_EASING})));return{transform:[{scale:scale},{rotate:rotate}]};}"
};
export default function AnimatedEffectEmoji(props) {
  const { userId, voiceChannelEffect } = props;
  let hasNotch = props.hasNotch;
  if (hasNotch === void 0) {
    hasNotch = false;
  }
  const onComplete = props.onComplete;
  const styles = useStyles();
  const { emoji, sentAt } = voiceChannelEffect;
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  useEffect(() => {
    let c26710_0;
    if (Date.now() - sentAt >= c7109_8) {
      if (onComplete != null) {
        onComplete();
      }
    } else {
      c26710_0 = setTimeout(() => {
        if (onComplete != null) {
          onComplete();
        }
      }, c7109_7);
    }
    return () => {
      if (c26710_0 != null) {
        clearTimeout(c26710_0);
      }
    };
  }, [sentAt, userId, onComplete]);
  const N = function N() {
    const r20 = _timing.withTiming("-120deg", {
      duration: 0
    });
    let duration = 300;
    const rotate = _ReanimatedRexport.withSequence(r20, _ReanimatedRexport.withDelay(100, _timing.withTiming("0deg", {
      duration: stateFromStores ? 0 : 300,
      easing: _native.STANDARD_EASING
    })));
    const r41 = _timing.withTiming(0, {
      duration: 0
    });
    if (stateFromStores) {
      duration = 0;
    }
    return {
      transform: [{
        scale: _ReanimatedRexport.withSequence(r41, _ReanimatedRexport.withDelay(100, _timing.withTiming(1, {
          duration,
          easing: _native.STANDARD_EASING
        })))
      }, {
        rotate
      }]
    };
  };
  N.__closure = {
    withSequence: _ReanimatedRexport.withSequence,
    withTiming: _timing.withTiming,
    ANIMATION_ROTATION_DEG: -120,
    withDelay: _ReanimatedRexport.withDelay,
    useReducedMotion: stateFromStores,
    STANDARD_EASING: _native.STANDARD_EASING
  };
  N.__workletHash = 75069010226;
  N.__initData = __initData;
  const animatedStyle = useAnimatedStyle(N);
  let r47 = null;
  if (emoji != null) {
    const style = [styles.voiceChannelEffectEmojiContainer, generateBoxShadowStyle(EIGHT_DP_ELEVATION_SHADOW_PARAMS), animatedStyle, ,];
    if (hasNotch) {
      hasNotch = styles.voiceChannelEffectEmojiContainerTileNotch;
    }
    style[3] = hasNotch;
    r47 = <ReanimatedRexport.View style={style}>
      <View style={styles.voiceChannelEffectEmoji}>
        <Emoji url={getEffectUrl(emoji)} surrogates={emoji.name} />
      </View>
    </ReanimatedRexport.View>;
  }
  return r47;
};