111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
// Metro module 8778 (f8779).
|
|
import { useRef, useState, useMemo, useCallback, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { AnimationState } from "../../PremiumGiftingUtils";
|
|
import { getGiftAnimationData, getLottieType, LottieType } from "../utils/GiftAnimationData";
|
|
import LottieAnimationView from "../../../../components_native/common/LottieAnimationView";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
display: "flex",
|
|
alignItems: "flex-end",
|
|
justifyContent: "center",
|
|
flexDirection: "row"
|
|
},
|
|
consistentHeight: {
|
|
height: 300
|
|
},
|
|
animation: {
|
|
maxWidth: 375,
|
|
width: "100%",
|
|
height: "auto"
|
|
},
|
|
baseAnimation: {
|
|
position: "absolute",
|
|
bottom: 0
|
|
},
|
|
lottie: {
|
|
height: 275
|
|
}
|
|
});
|
|
export default function PremiumGiftBackgroundAnimation(props) {
|
|
let ref, ref2, state, setState, state2, setState2, state3, setState3, state4, setState4;
|
|
const giftStyle = props.giftStyle;
|
|
let withConsistentHeight = props.withConsistentHeight;
|
|
ref = void 0;
|
|
ref2 = void 0;
|
|
state = void 0;
|
|
setState = void 0;
|
|
state2 = void 0;
|
|
setState2 = void 0;
|
|
state3 = void 0;
|
|
setState3 = void 0;
|
|
state4 = void 0;
|
|
setState4 = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
ref = useRef(null);
|
|
ref2 = useRef(null);
|
|
[state, setState] = useState(AnimationState.ACTION);
|
|
[state2, setState2] = useState(void 0);
|
|
[state3, setState3] = useState(void 0);
|
|
[state4, setState4] = useState(false);
|
|
const memo = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.ACTION), [giftStyle]);
|
|
const memo2 = useMemo(() => getGiftAnimationData(giftStyle, AnimationState.LOOP), [giftStyle]);
|
|
const lottieType = getLottieType(giftStyle);
|
|
useMemo(() => {
|
|
if (state2 !== giftStyle) {
|
|
setState2(giftStyle);
|
|
setState4(state !== AnimationState.LOOP && state3 != null);
|
|
setState(AnimationState.ACTION);
|
|
}
|
|
}, [state3, state2, giftStyle, state]);
|
|
const callback = useCallback((a0) => {
|
|
if (state4) {
|
|
setState4(false);
|
|
} else if (!(state === AnimationState.LOOP || a0)) {
|
|
setState3(AnimationState.ACTION);
|
|
setState(AnimationState.LOOP);
|
|
}
|
|
}, [state, state4]);
|
|
useEffect(() => {
|
|
if (state === AnimationState.LOOP) {
|
|
const current2 = ref.current;
|
|
if (current2 != null) {
|
|
current2.reset();
|
|
}
|
|
} else {
|
|
const current = ref2.current;
|
|
if (current != null) {
|
|
current.reset();
|
|
}
|
|
}
|
|
}, [state]);
|
|
useEffect(() => {
|
|
if (stateFromStores) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.reset();
|
|
}
|
|
}
|
|
}, [stateFromStores]);
|
|
const style = [styles.container, ,];
|
|
if (withConsistentHeight) {
|
|
withConsistentHeight = styles.consistentHeight;
|
|
}
|
|
style[1] = withConsistentHeight;
|
|
const style2 = [styles.baseAnimation, styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, ,];
|
|
const r98 = state2 === giftStyle;
|
|
style2[3] = {
|
|
opacity: r98 ? state !== AnimationState.LOOP ? 1 : 0 : 0
|
|
};
|
|
return <View style={style}>
|
|
<LottieAnimationView style={style2} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref} source={memo} autoPlay={!stateFromStores} onAnimationFinish={callback} loop={false} />
|
|
<LottieAnimationView style={[styles.animation, lottieType === LottieType.LOTTIE && styles.lottie, {
|
|
opacity: r98 ? state === AnimationState.LOOP ? 1 : 0 : 0
|
|
}]} hardwareAccelerationAndroid={lottieType === LottieType.LOTTIE} ref={ref2} source={memo2} autoPlay={stateFromStores ? !stateFromStores : state === AnimationState.LOOP} loop />
|
|
</View>;
|
|
};
|