297 lines
11 KiB
TypeScript
297 lines
11 KiB
TypeScript
// Metro module 10971 (f10972).
|
|
import { useState, useCallback, useEffect, memo, useRef } from "react";
|
|
import { ActivityIndicator, StyleSheet, View } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import AppStateStore from "../../../stores/native/AppStateStore";
|
|
import { RewardFilterTypes } from "../QuestConstants";
|
|
import { Orientation } from "../../../Constants";
|
|
import ModalActionCreators from "../../../actions/ModalActionCreators";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { OrbsIcon } from "../../../design/components/Icon/native/redesign/generated/OrbsIcon";
|
|
import { HeaderBackButton } from "../../../_bundle/Module5150";
|
|
import { XSmallIcon } from "../../../design/components/Icon/native/redesign/generated/XSmallIcon";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import { useAPNGPlayerControls, APNGPlayer } from "../../image/native/APNGPlayer.android";
|
|
import { isAndroid } from "../../../_bundle/Module501";
|
|
import Module10972 from "../../../_bundle/Module10972";
|
|
import { VideoComponent } from "../../../components_native/common/Video";
|
|
import Module10973 from "../../../_bundle/Module10973";
|
|
import Module10974 from "../../../_bundle/Module10974";
|
|
import Module10975 from "../../../_bundle/Module10975";
|
|
import Module10976 from "../../../_bundle/Module10976";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import { useFetchVirtualCurrencyBalance } from "../../virtual_currency/hooks/index";
|
|
import { AppStates } from "../../../ConstantsIOS";
|
|
import { getQuestOrbRewardQuantityForUser } from "../utils/QuestRewardUtils";
|
|
import { lockOrientation, restoreDefaultOrientation } from "../../device/native/DeviceOrientation";
|
|
import { openQuestHome } from "./QuestUtils.native";
|
|
import { QuestContent } from "../QuestTypes";
|
|
import { SafeAreaPaddingView } from "../../../components_native/common/SafeAreaView";
|
|
import { Heading, Text } from "../../../design/components/Text/native/Text";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
let c7391_17, useStyles, useStyles2, useStyles3, CancelButton, Component3, Component2, Component, Component4, useStyles4, StaticOrb, AnimatedOrbContainer;
|
|
const OrbsBalance = function OrbsBalance(props) {
|
|
const balance2 = props.balance;
|
|
const styles3 = useStyles3();
|
|
return <>
|
|
<OrbsIcon size="xs" color={Module712.colors.WHITE} style={styles3.orbsIcon} />
|
|
<View style={styles3.spacer} />
|
|
{balance2}
|
|
</>;
|
|
};
|
|
CancelButton = function CancelButton() {
|
|
const styles = useStyles();
|
|
return <HeaderBackButton onPress={function onPress() {
|
|
ModalActionCreators.popWithKey(c7391_17);
|
|
}} backImage={() => <XSmallIcon size="lg" style={[styles.closeButtonIcon]} />} accessibilityLabel={intl.string(t.cpT0Cq)} labelVisible={false} style={styles.closeButton} />;
|
|
};
|
|
StaticOrb = function StaticOrb() {
|
|
return <View style={{
|
|
width: "100%",
|
|
height: "100%"
|
|
}}>
|
|
<FastImage source={{
|
|
uri: Module10974
|
|
}} style={useStyles4().animatedOrb} fade={false} />
|
|
</View>;
|
|
};
|
|
AnimatedOrbContainer = function AnimatedOrbContainer(props) {
|
|
const isAppActive = props.isAppActive;
|
|
const styles4 = useStyles4();
|
|
const [state, setState] = useState(false);
|
|
const [state2, setState2] = useState(false);
|
|
let [state3, setState3] = useState(true);
|
|
const callback = useCallback(() => {
|
|
setState(true);
|
|
}, []);
|
|
const callback2 = useCallback(() => {
|
|
setState2(true);
|
|
}, []);
|
|
useEffect(() => {
|
|
if (state && state2) {
|
|
let c26885_0 = setTimeout(() => {
|
|
setState3(false);
|
|
}, 1450);
|
|
return () => clearTimeout(c26885_0);
|
|
}
|
|
}, [state, state2]);
|
|
const r50 = [(state ? !state : !state2) && <View style={{
|
|
height: "100%"
|
|
}} />, <Component uri={Module10975} style={[styles4.animatedOrb, (state3 ? state3 : !state2) && {
|
|
opacity: 0
|
|
}]} onLoad={callback2} animate={state3 ? !state3 : isAppActive} />, ,];
|
|
if (state3) {
|
|
state3 = <Component uri={Module10976} style={[styles4.animatedOrb]} onLoad={callback} animate={isAppActive} />;
|
|
}
|
|
r50[2] = state3;
|
|
return <View style={{
|
|
width: "100%",
|
|
height: "100%"
|
|
}}>{r50}</View>;
|
|
};
|
|
c7391_17 = "QuestOrbsRewardModal";
|
|
useStyles = createStyles({
|
|
closeButton: {
|
|
alignSelf: "flex-start",
|
|
marginHorizontal: Module712.space.PX_16,
|
|
zIndex: 999
|
|
},
|
|
closeButtonIcon: {
|
|
tintColor: Module712.colors.WHITE
|
|
}
|
|
});
|
|
useStyles2 = createStyles(() => ({
|
|
root: {
|
|
flex: 1,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW
|
|
},
|
|
background: StyleSheet.absoluteFillObject,
|
|
loading: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
header: {
|
|
flexDirection: "row",
|
|
alignItems: "flex-end",
|
|
justifyContent: "flex-end"
|
|
},
|
|
main: {
|
|
flex: 2
|
|
},
|
|
animation: {
|
|
flex: 3
|
|
},
|
|
body: {
|
|
flex: 2,
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
gap: Module712.space.PX_16
|
|
},
|
|
title: {
|
|
textAlign: "center",
|
|
marginHorizontal: Module712.space.PX_32
|
|
},
|
|
buttonsContainer: {
|
|
padding: Module712.space.PX_24,
|
|
gap: Module712.space.PX_16
|
|
}
|
|
}));
|
|
useStyles3 = createStyles({
|
|
orbsIcon: {
|
|
transform: [{
|
|
translateY: 3
|
|
}]
|
|
},
|
|
spacer: {
|
|
width: 2
|
|
}
|
|
});
|
|
Component3 = memo(function({ uri, onLoad, animate = true }) {
|
|
useEffect(() => {
|
|
FastImage.preload(uri);
|
|
}, [uri]);
|
|
return <FastImage key={`orb-animate-${animate}`} source={{
|
|
uri
|
|
}} style={{
|
|
width: "100%",
|
|
height: "100%"
|
|
}} resizeMode="cover" enableAnimation={animate} onLoad={onLoad} usesSmallCache={false} fade={false} />;
|
|
});
|
|
Component2 = memo(function({ uri: uri2, onLoad, animate = true }) {
|
|
let c18424_0 = animate;
|
|
const ref = useRef(null);
|
|
const aPNGPlayerControls = useAPNGPlayerControls(ref);
|
|
useEffect(() => {
|
|
if (c18424_0) {
|
|
aPNGPlayerControls.play();
|
|
} else {
|
|
aPNGPlayerControls.stop();
|
|
}
|
|
}, [animate, aPNGPlayerControls]);
|
|
return <APNGPlayer ref={ref} url={uri2} autoplay={false} style={{
|
|
width: "100%",
|
|
height: "100%"
|
|
}} onLoad={onLoad} />;
|
|
});
|
|
Component = memo(function({ uri: uri2, style, onLoad, animate = true }) {
|
|
return <View style={style} renderToHardwareTextureAndroid needsOffscreenAlphaCompositing>
|
|
{isAndroid() ? <Component2 uri={uri2} onLoad={onLoad} animate={animate} /> : <Component3 uri={uri2} onLoad={onLoad} animate={animate} />}
|
|
</View>;
|
|
});
|
|
Component4 = memo(function({ useReducedMotion, style, onStaticBgLoad, onAnimatedBgLoad, isAppActive }) {
|
|
return <>
|
|
<FastImage source={{
|
|
uri: Module10972
|
|
}} style={style} resizeMode="cover" onLoad={onStaticBgLoad} />
|
|
{(useReducedMotion ? !useReducedMotion : isAppActive) && <VideoComponent source={{
|
|
uri: Module10973
|
|
}} style={style} resizeMode="cover" onLoad={onAnimatedBgLoad} disableFocus playInBackground preventsDisplaySleepDuringVideoPlayback={false} />}
|
|
</>;
|
|
});
|
|
useStyles4 = createStyles({
|
|
animatedOrb: {
|
|
position: "absolute",
|
|
height: "130%",
|
|
width: "130%",
|
|
left: "-15%",
|
|
top: "-15%",
|
|
pointerEvents: "none"
|
|
}
|
|
});
|
|
export default function QuestOrbsRewardModal(props) {
|
|
let balance, setState4, setState5;
|
|
const quest = props.quest;
|
|
balance = void 0;
|
|
setState4 = void 0;
|
|
setState5 = void 0;
|
|
const styles2 = useStyles2();
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
let balance2 = useFetchVirtualCurrencyBalance().balance;
|
|
balance = balance2;
|
|
let state;
|
|
[state, setState4] = useState(false);
|
|
let state2;
|
|
[state2, setState5] = useState(false);
|
|
const stateFromStores2 = useStateFromStores([AppStateStore], () => AppStateStore.getState());
|
|
const ACTIVE = AppStates.ACTIVE;
|
|
const stateFromStores3 = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
let count = quest.userStatus?.orbQuantityClaimed;
|
|
if (count == null) {
|
|
count = getQuestOrbRewardQuantityForUser(quest.config, stateFromStores3);
|
|
}
|
|
const isAppActive = stateFromStores2 === ACTIVE;
|
|
useEffect(() => {
|
|
lockOrientation(Orientation.PORTRAIT);
|
|
return () => {
|
|
restoreDefaultOrientation();
|
|
};
|
|
}, []);
|
|
const callback2 = useCallback(() => {
|
|
setState4(true);
|
|
}, []);
|
|
const callback3 = useCallback(() => {
|
|
setState5(true);
|
|
}, []);
|
|
const callback = useCallback(() => {
|
|
ModalActionCreators.popWithKey(c7391_17);
|
|
openQuestHome({
|
|
filter: RewardFilterTypes.VIRTUAL_CURRENCY,
|
|
fromContent: QuestContent.REWARD_MODAL
|
|
});
|
|
}, []);
|
|
const r95 = [<View style={StyleSheet.absoluteFill} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
|
|
<Component4 useReducedMotion={stateFromStores} style={styles2.background} onStaticBgLoad={callback2} onAnimatedBgLoad={callback3} isAppActive={isAppActive} />
|
|
</View>, (state ? !state : stateFromStores || !state2) && <View style={styles2.loading}>
|
|
<ActivityIndicator animating />
|
|
</View>, ,];
|
|
if (!state) {
|
|
state = stateFromStores ? !stateFromStores : state2;
|
|
}
|
|
if (state) {
|
|
const r116 = [<View style={styles2.header}>
|
|
<CancelButton />
|
|
</View>, <View style={styles2.animation} accessible={false} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
|
|
{stateFromStores ? <StaticOrb /> : <AnimatedOrbContainer isAppActive={isAppActive} />}
|
|
</View>, , ,];
|
|
const FIilK5 = t.FIilK5;
|
|
if (count == null) {
|
|
count = 0;
|
|
}
|
|
const r140 = [<Heading variant="heading-xl/bold" color="text-overlay-light" style={styles2.title}>
|
|
{intl.format(FIilK5, {
|
|
count
|
|
})}
|
|
</Heading>, ,];
|
|
if (balance == null) {
|
|
balance2 = 0;
|
|
}
|
|
r140[1] = <Text variant="text-md/normal" color="text-overlay-light" style={styles2.title}>
|
|
{balance2 >= 4100 ? intl.format(t["2dz2AL"], {
|
|
balanceHook: () => <OrbsBalance key="balance" balance={balance} />,
|
|
profileDecoHook: () => <Text key="profileDeco" variant="text-md/semibold" color="text-overlay-light">
|
|
{intl.string(t.pGDUH9)}
|
|
</Text>
|
|
}) : intl.format(t.rKHvlX, {
|
|
balanceHook: () => <OrbsBalance key="balance" balance={balance} />
|
|
})}
|
|
</Text>;
|
|
r116[2] = <View style={styles2.body}>{r140}</View>;
|
|
r116[3] = <View style={styles2.buttonsContainer}>
|
|
<Button onPress={callback} variant="primary" size="lg" text={intl.string(t.uJAMFX)} />
|
|
</View>;
|
|
state = <SafeAreaPaddingView style={[styles2.main]} top bottom left right>{r116}</SafeAreaPaddingView>;
|
|
}
|
|
r95[2] = state;
|
|
return <View style={styles2.root}>{r95}</View>;
|
|
};
|
|
export function openQuestOrbsRewardModal({ quest }) {
|
|
ModalActionCreators.pushLazy(async () => (await import("./QuestOrbsRewardModal.native")).default, {
|
|
quest
|
|
}, c7391_17);
|
|
}
|