113 lines
4.5 KiB
TypeScript
113 lines
4.5 KiB
TypeScript
// Metro module 14076 (f14077).
|
|
import { StyleSheet, View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { isAndroid, isIOS } from "../../../../utils/PlatformUtils";
|
|
import { APNGPlayer } from "../../../image/native/APNGPlayer.android";
|
|
import Module14077 from "../../../../_bundle/Module14077";
|
|
import { VideoComponent } from "../../../../components_native/common/Video";
|
|
import Module14078 from "../../../../_bundle/Module14078";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import Module14079 from "../../../../_bundle/Module14079";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { OrbsIcon } from "../../../../design/components/Icon/native/redesign/generated/OrbsIcon";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
let lg, useStyles;
|
|
const BountiesRecapOrbsBackground = function BountiesRecapOrbsBackground(props) {
|
|
const { style, reducedMotion } = props;
|
|
return isAndroid() ? <View style={style} needsOffscreenAlphaCompositing renderToHardwareTextureAndroid pointerEvents="none">
|
|
<APNGPlayer url={Module14077} style={StyleSheet.absoluteFillObject} autoplay={!reducedMotion} />
|
|
</View> : <VideoComponent source={{
|
|
uri: Module14078
|
|
}} style={style} resizeMode="contain" paused={reducedMotion} disableFocus preventsDisplaySleepDuringVideoPlayback={false} importantForAccessibility="no-hide-descendants" />;
|
|
};
|
|
lg = Module712.radii.lg;
|
|
useStyles = createStyles(() => ({
|
|
root: {
|
|
overflow: "hidden",
|
|
borderRadius: lg,
|
|
backgroundColor: Module712.colors.MOBILE_ACTIONSHEET_BACKGROUND
|
|
},
|
|
content: {
|
|
flex: 1,
|
|
paddingHorizontal: Module712.space.PX_24,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
centeredCopy: {
|
|
alignItems: "center",
|
|
width: "100%"
|
|
},
|
|
orbsBackground: {
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
height: "40%",
|
|
zIndex: 1
|
|
},
|
|
headerLabel: {
|
|
paddingBottom: Module712.space.PX_4,
|
|
textTransform: "uppercase"
|
|
},
|
|
titleRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
paddingBottom: Module712.space.PX_24,
|
|
gap: Module712.space.PX_8
|
|
},
|
|
actions: {
|
|
position: "absolute",
|
|
left: Module712.space.PX_24,
|
|
right: Module712.space.PX_24,
|
|
gap: Module712.space.PX_12
|
|
},
|
|
orbAmount: {
|
|
marginTop: isIOS() ? 6 : 0,
|
|
lineHeight: 46
|
|
}
|
|
}));
|
|
export function BountiesScrollRecapPage(props) {
|
|
const { orbAmount, onClose, style } = props;
|
|
const styles = useStyles();
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
return <View style={[styles.root, style]} pointerEvents="box-none">
|
|
<View style={StyleSheet.absoluteFillObject} pointerEvents="none">
|
|
<VideoComponent source={{
|
|
uri: Module14079
|
|
}} style={StyleSheet.absoluteFillObject} resizeMode="cover" paused={stateFromStores} disableFocus preventsDisplaySleepDuringVideoPlayback={false} importantForAccessibility="no-hide-descendants" />
|
|
<BountiesRecapOrbsBackground style={styles.orbsBackground} reducedMotion={stateFromStores} />
|
|
</View>
|
|
<View style={styles.content} pointerEvents="box-none">
|
|
<View style={styles.centeredCopy} pointerEvents="none">
|
|
<Text variant="text-xs/bold" color="text-brand" style={styles.headerLabel}>
|
|
{intl.string(t.d6Rrn6)}
|
|
</Text>
|
|
<View accessible accessibilityRole="text" accessibilityLabel={`+${orbAmount}`}>
|
|
<View style={styles.titleRow}>
|
|
<OrbsIcon size="lg" color="icon-strong" accessible={false} />
|
|
<Text variant="display-lg" color="text-strong" accessible={false} style={styles.orbAmount}>
|
|
{`+${orbAmount}`}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
<Text variant="text-md/medium" color="text-muted" style={{
|
|
textAlign: "center"
|
|
}}>
|
|
{intl.string(t.x0Ffz3)}
|
|
</Text>
|
|
</View>
|
|
<View style={[styles.actions, {
|
|
bottom: safeAreaInsets_native.bottom + Module712.space.PX_8
|
|
}]}>
|
|
<Button grow variant="primary" text={intl.string(t.i4jeWR)} size="lg" onPress={onClose} />
|
|
</View>
|
|
</View>
|
|
</View>;
|
|
}
|