259 lines
7.9 KiB
TypeScript
259 lines
7.9 KiB
TypeScript
// Metro module 14094 (f14095).
|
|
import * as Module19 from "react";
|
|
import { useCallback, useState, useRef, useEffect, useMemo } from "react";
|
|
import { AppState, StyleSheet, View } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import BountyStore from "../BountyStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import * as _Module501 from "../../../_bundle/Module501";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import { getScaledImageUrl, getScaledFirstFrameImageUrl } from "../lib/AssetUtils";
|
|
import { useToken } from "../../../design/tokens/native/useToken";
|
|
import { Card } from "../../../design/components/Card/native/Card.native";
|
|
import Video from "../../../_bundle/Video_8143";
|
|
import FastImage from "../../../components_native/common/FastImage";
|
|
import { CheckmarkSmallBoldIcon } from "../../../design/components/Icon/native/redesign/generated/CheckmarkSmallBoldIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { CircleCheckIcon } from "../../../design/components/Icon/native/redesign/generated/CircleCheckIcon";
|
|
let c9860_14, isAndroid, isAndroid2;
|
|
const width = 188;
|
|
const useStyles = createStyles(() => ({
|
|
tile: {
|
|
gap: Module712.space.PX_12
|
|
},
|
|
card: {
|
|
width,
|
|
height: 313,
|
|
overflow: "hidden",
|
|
padding: 0
|
|
},
|
|
cardImage: {
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
previewVideo: {
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
badge: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_12,
|
|
left: Module712.space.PX_12,
|
|
backgroundColor: Module712.colors.CONTROL_OVERLAY_PRIMARY_BACKGROUND_DEFAULT,
|
|
borderRadius: Module712.radii.round,
|
|
paddingHorizontal: Module712.space.PX_8,
|
|
paddingVertical: Module712.space.PX_4,
|
|
color: Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT
|
|
},
|
|
badgeContent: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_4
|
|
},
|
|
badgeText: {
|
|
textTransform: "uppercase",
|
|
color: Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT
|
|
},
|
|
startButton: {
|
|
position: "absolute",
|
|
bottom: Module712.space.PX_8,
|
|
left: Module712.space.PX_8,
|
|
right: Module712.space.PX_8
|
|
},
|
|
cardFooter: {
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
maxWidth: width
|
|
},
|
|
advertiserRow: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_4,
|
|
alignItems: "center"
|
|
},
|
|
advertiserName: {
|
|
flexShrink: 1
|
|
},
|
|
advertiserIcon: {
|
|
flexShrink: 0,
|
|
opacity: 0.7
|
|
}
|
|
}));
|
|
c9860_14 = _Module501.isAndroid() ? 150 : 0;
|
|
isAndroid = _Module501.isAndroid();
|
|
isAndroid2 = _Module501.isAndroid();
|
|
const r52 = Module19.memo(function({ bounty, index, isActive, isModalVisible, onPress }) {
|
|
let setState, setState2, state, setState3, ref, ref2, setState4, state2;
|
|
setState = void 0;
|
|
setState2 = void 0;
|
|
state = void 0;
|
|
setState3 = void 0;
|
|
ref = void 0;
|
|
ref2 = void 0;
|
|
setState4 = void 0;
|
|
state2 = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([BountyStore], () => BountyStore.isBountyCompleted(bounty.id));
|
|
const callback2 = useCallback(() => {
|
|
onPress(bounty, index);
|
|
}, [onPress, bounty, index]);
|
|
const videoPreview = bounty.videoPreview;
|
|
let uri = bounty.imagePreview != null ? getScaledImageUrl({
|
|
assetUrl: bounty.imagePreview,
|
|
width,
|
|
height: 313
|
|
}) : null;
|
|
if (uri == null && videoPreview != null) {
|
|
uri = getScaledFirstFrameImageUrl({
|
|
assetUrl: videoPreview,
|
|
width,
|
|
height: 313
|
|
});
|
|
}
|
|
let state3;
|
|
[state3, setState] = useState(false);
|
|
const callback = useCallback(() => {
|
|
setState(true);
|
|
}, []);
|
|
let state4;
|
|
[state4, setState2] = useState(false);
|
|
let state5;
|
|
[state5, setState3] = useState(false);
|
|
state = state5;
|
|
const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const token = useToken(Module712.modules.mobile.BOUNTY_TILE_BORDER_RADIUS);
|
|
ref = useRef(null);
|
|
const callback3 = useCallback(() => {
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
}
|
|
ref.current = setTimeout(() => {
|
|
setState2(true);
|
|
}, c9860_14);
|
|
}, []);
|
|
const [state6, setState5] = useState(isActive);
|
|
if (isActive !== state6) {
|
|
setState5(isActive);
|
|
if (isActive) {
|
|
if (state4 ? !state : state4) {
|
|
setState2(false);
|
|
}
|
|
if (state) {
|
|
setState3(false);
|
|
}
|
|
} else if (isAndroid) {
|
|
setState3(true);
|
|
}
|
|
}
|
|
ref2 = useRef(null);
|
|
useEffect(() => {
|
|
if (state) {
|
|
ref2.current = setTimeout(() => {
|
|
setState3(false);
|
|
setState2(false);
|
|
ref2.current = null;
|
|
}, 150);
|
|
}
|
|
return () => {
|
|
if (ref2.current != null) {
|
|
clearTimeout(ref2.current);
|
|
ref2.current = null;
|
|
}
|
|
};
|
|
}, [state]);
|
|
useEffect(() => {
|
|
let r2 = isActive;
|
|
if (isActive ? ref2.current != null : isActive) {
|
|
clearTimeout(ref2.current);
|
|
ref2.current = null;
|
|
}
|
|
if (!isActive) {
|
|
r2 = ref.current == null;
|
|
}
|
|
if (!r2) {
|
|
clearTimeout(ref.current);
|
|
ref.current = null;
|
|
}
|
|
}, [isActive]);
|
|
useEffect(() => () => {
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
ref.current = null;
|
|
}
|
|
}, []);
|
|
let state7;
|
|
[state7, setState4] = useState(AppState.currentState === "active");
|
|
useEffect(() => {
|
|
let c27629_0 = AppState.addEventListener("change", (a0) => {
|
|
setState4(a0 === "active");
|
|
});
|
|
return () => {
|
|
c27629_0.remove();
|
|
};
|
|
}, []);
|
|
let r126 = (isActive ? isActive : state) && videoPreview != null && state3;
|
|
let r127 = isAndroid2;
|
|
if (isAndroid2) {
|
|
r127 = isModalVisible;
|
|
}
|
|
let r128 = !r127;
|
|
if (!r127) {
|
|
if (state) {
|
|
state5 = !isActive;
|
|
}
|
|
r128 = !state5;
|
|
}
|
|
if (r128) {
|
|
r128 = r126;
|
|
}
|
|
if (r128) {
|
|
r128 = state4;
|
|
}
|
|
state2 = r128;
|
|
const memo = useMemo(() => ({
|
|
opacity: state2 ? 0 : 1
|
|
}), [state2]);
|
|
if (r126) {
|
|
r126 = <Video accessible={false} importantForAccessibility="no-hide-descendants" accessibilityRole="none" onReadyForDisplay={callback3} source={{
|
|
uri: videoPreview
|
|
}} style={styles.previewVideo} resizeMode="cover" repeat muted disableFocus paused={state7 ? stateFromStores2 : !state7} />;
|
|
}
|
|
const r150 = [r126, , , ,];
|
|
if (uri == null) {
|
|
uri = void 0;
|
|
}
|
|
r150[1] = <FastImage style={[styles.cardImage, memo]} onLoad={callback} source={{
|
|
uri
|
|
}} resizeMode="cover" />;
|
|
r150[2] = <View style={styles.badge}>
|
|
<View style={styles.badgeContent}>
|
|
{stateFromStores && <CheckmarkSmallBoldIcon size="xxs" color={Module712.colors.CONTROL_OVERLAY_PRIMARY_TEXT_DEFAULT} />}
|
|
<Text variant="text-xs/bold" style={styles.badgeText}>
|
|
{intl.string(stateFromStores ? t.vlGTLf : t["fFIJ/9"])}
|
|
</Text>
|
|
</View>
|
|
</View>;
|
|
r150[3] = <View style={styles.startButton}>
|
|
<Button variant="secondary-overlay" text={stateFromStores ? intl.string(t["9UtZAY"]) : intl.string(t.LhlgY9)} onPress={callback2} />
|
|
</View>;
|
|
const r209 = [<Card style={styles.card} radius={token} onPress={callback2} android_ripple={{
|
|
color: "transparent"
|
|
}}>{r150}</Card>, ,];
|
|
let advertiserName = bounty.advertiserName;
|
|
if (advertiserName == null) {
|
|
advertiserName = "";
|
|
}
|
|
r209[1] = <View style={styles.cardFooter}>
|
|
<View style={styles.advertiserRow}>
|
|
<Text variant="text-sm/medium" color="text-subtle" lineClamp={1} style={styles.advertiserName}>{advertiserName}</Text>
|
|
<CircleCheckIcon size="xxs" style={styles.advertiserIcon} color={Module712.colors.ICON_SUBTLE} />
|
|
</View>
|
|
<Text variant="text-sm/medium" color="text-muted">
|
|
{intl.string(t.o6FLcF)}
|
|
</Text>
|
|
</View>;
|
|
return <View style={styles.tile}>{r209}</View>;
|
|
});
|
|
export default r52;
|
|
export const CARD_WIDTH = 188;
|