260 lines
8.6 KiB
TypeScript
260 lines
8.6 KiB
TypeScript
// Metro module 8059 (f8060).
|
|
import _slicedToArray from "../../../../_bundle/_slicedToArray";
|
|
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import AppStateStore from "../../../../stores/native/AppStateStore";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import { sortEffectLayers, usePotentiallyRandomizedProfileEffect } from "../utils";
|
|
import { PROFILE_EFFECT_INTRO_DELAY } from "../constants";
|
|
import * as _ProfileEffectUtils from "./ProfileEffectUtils";
|
|
import useClock from "../useClock";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { AppStates } from "../../../../ConstantsIOS";
|
|
import ProfileEffectLayer_android from "./ProfileEffectLayer.android";
|
|
import { DEFAULT_PROFILE_EFFECT_WH_RATIO } from "./getAssetWHRatio";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import useProfileEffect from "../useProfileEffect";
|
|
function $mk79773($env) {
|
|
return () => new Set($env[0].map((item) => item.src));
|
|
}
|
|
function $mk79774($env) {
|
|
return () => {
|
|
const r2 = $env;
|
|
const r4 = r2[2];
|
|
const current2 = r2[1];
|
|
r4.current = current2;
|
|
r2[3].current = current2.size === 0;
|
|
};
|
|
}
|
|
function $mk79775($env) {
|
|
return (a0) => {
|
|
const r3 = $env;
|
|
const r2 = r3[3];
|
|
if (!r2.current) {
|
|
const r7 = r3[2];
|
|
r7.current.delete(a0);
|
|
if (r7.current.size === 0) {
|
|
r2.current = true;
|
|
}
|
|
}
|
|
};
|
|
}
|
|
function $mk79776($env) {
|
|
return (a0) => {
|
|
(0, $env[0])(a0.nativeEvent.layout.width);
|
|
};
|
|
}
|
|
let useStyles, ProfileEffect;
|
|
const StaticEffect = function StaticEffect(props) {
|
|
let props2;
|
|
const { profileEffect: profileEffect2, bannerAdjustment = 0 } = props;
|
|
let env16226;
|
|
const useThumbnail = props.useThumbnail;
|
|
let thumbnailUrlOverride = props.thumbnailUrlOverride;
|
|
const styles2 = useStyles();
|
|
let reducedMotionSrc2 = profileEffect2.reducedMotionSrc;
|
|
const reducedMotionSrc = reducedMotionSrc2;
|
|
const { thumbnailPreviewSrc: thumbnailPreviewSrc2, accessibilityLabel: accessibilityLabel2 } = profileEffect2;
|
|
const r23 = env16226 = {};
|
|
env16226[0] = void 0;
|
|
const r25 = _slicedToArray(useState(0), 2);
|
|
const r15 = r25[0];
|
|
env16226[0] = r25[1];
|
|
useWindowDimensions_native().height;
|
|
const callback2 = useCallback($mk79776(r23), []);
|
|
const state = r15;
|
|
const [height, setState] = useState(0);
|
|
if (thumbnailUrlOverride == null) {
|
|
thumbnailUrlOverride = thumbnailPreviewSrc2;
|
|
}
|
|
const thumbnailPreviewSrc = thumbnailUrlOverride;
|
|
useEffect(() => {
|
|
if (state !== 0) {
|
|
Image2.getSize(useThumbnail ? thumbnailPreviewSrc : reducedMotionSrc, (a0, a1) => {
|
|
setState(a1 * (state / a0));
|
|
}, () => {
|
|
setState(state / DEFAULT_PROFILE_EFFECT_WH_RATIO);
|
|
});
|
|
}
|
|
}, [reducedMotionSrc, thumbnailPreviewSrc, state, useThumbnail]);
|
|
if (height === 0) {
|
|
props2 = {
|
|
style: styles2.profileEffects,
|
|
pointerEvents: "none",
|
|
onLayout: callback2
|
|
};
|
|
} else {
|
|
if (useThumbnail) {
|
|
reducedMotionSrc2 = thumbnailPreviewSrc;
|
|
}
|
|
props2 = {
|
|
style: styles2.profileEffects,
|
|
pointerEvents: "none",
|
|
onLayout: callback2,
|
|
children: <FastImage resizeMode="cover" resizeMethod="resize" enableAnimation source={{
|
|
uri: reducedMotionSrc2
|
|
}} alt={accessibilityLabel2} height={height} width={state} style={[styles2.effect, {
|
|
width: state,
|
|
height,
|
|
top: 0 - bannerAdjustment
|
|
}]} />
|
|
};
|
|
}
|
|
return <View {...props2} />;
|
|
};
|
|
useStyles = createStyles({
|
|
profileEffects: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
flex: 1,
|
|
justifyContent: "flex-start"
|
|
},
|
|
effect: {
|
|
position: "absolute"
|
|
}
|
|
});
|
|
ProfileEffect = (props) => {
|
|
let ref, callback, ref2, state3, setState2, ref3, ref4, ref5, stop, reset, stateFromStores, ref6;
|
|
let env16228;
|
|
let env16229;
|
|
const profileEffect = props.profileEffect;
|
|
props.replayOnNavigationFocus;
|
|
const { style, paused } = props;
|
|
ref = void 0;
|
|
callback = void 0;
|
|
ref2 = void 0;
|
|
state3 = void 0;
|
|
setState2 = void 0;
|
|
ref3 = void 0;
|
|
ref4 = void 0;
|
|
ref5 = void 0;
|
|
stop = void 0;
|
|
reset = void 0;
|
|
stateFromStores = void 0;
|
|
ref6 = void 0;
|
|
const styles = useStyles();
|
|
const r21 = env16228 = {};
|
|
env16228[0] = void 0;
|
|
const r9 = _slicedToArray(useState(0), 2);
|
|
const r24 = r9[0];
|
|
env16228[0] = r9[1];
|
|
useWindowDimensions_native().height;
|
|
const callback2 = useCallback($mk79776(r21), []);
|
|
const state2 = r24;
|
|
const accessibilityLabel = profileEffect.accessibilityLabel;
|
|
const memo = useMemo(() => sortEffectLayers(profileEffect.effects), [profileEffect.effects]);
|
|
const r39 = env16229 = {};
|
|
env16229[0] = memo;
|
|
env16229[1] = void 0;
|
|
env16229[2] = void 0;
|
|
env16229[3] = void 0;
|
|
const memo2 = useMemo($mk79773(r39), [memo]);
|
|
env16229[1] = memo2;
|
|
env16229[2] = useRef(memo2);
|
|
const ref7 = useRef(false);
|
|
env16229[3] = ref7;
|
|
useEffect($mk79774(r39), [memo2]);
|
|
const callback3 = useCallback($mk79775(r39), []);
|
|
ref = ref7;
|
|
callback = callback3;
|
|
ref2 = useRef(-PROFILE_EFFECT_INTRO_DELAY);
|
|
[state3, setState2] = useState([]);
|
|
ref3 = useRef([]);
|
|
ref4 = useRef(false);
|
|
ref5 = useRef(memo);
|
|
useEffect(() => {
|
|
ref5.current = memo;
|
|
ref4.current = false;
|
|
ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
|
|
const current2 = memo.map((item) => _ProfileEffectUtils.shouldAnimate(item, ref2.current));
|
|
ref3.current = current2;
|
|
setState2(current2);
|
|
}, [memo]);
|
|
const clock = useClock(useCallback((a0) => {
|
|
if (ref.current) {
|
|
if (!ref4.current) {
|
|
ref4.current = true;
|
|
ref2.current = -PROFILE_EFFECT_INTRO_DELAY;
|
|
ref3.current = [];
|
|
}
|
|
ref2.current = ref2.current + a0;
|
|
const current2 = ref5.current;
|
|
const current = ref3.current;
|
|
let c26100_1 = current2.length !== current.length;
|
|
const current3 = current2.map((item, index) => {
|
|
const shouldAnimate = _ProfileEffectUtils.shouldAnimate(item, ref2.current);
|
|
if (shouldAnimate !== current[index]) {
|
|
c26100_1 = true;
|
|
}
|
|
return shouldAnimate;
|
|
});
|
|
if (c26100_1) {
|
|
ref3.current = current3;
|
|
setState2(current3);
|
|
}
|
|
}
|
|
}, [ref]));
|
|
stop = clock.stop;
|
|
reset = clock.reset;
|
|
stateFromStores = useStateFromStores([AppStateStore], () => AppStateStore.getState());
|
|
ref6 = useRef(null);
|
|
useEffect(() => {
|
|
if (ref6.current !== null) {
|
|
if (ref6.current !== stateFromStores) {
|
|
if (stateFromStores === AppStates.ACTIVE) {
|
|
reset();
|
|
} else {
|
|
stop();
|
|
}
|
|
ref6.current = stateFromStores;
|
|
}
|
|
} else {
|
|
ref6.current = stateFromStores;
|
|
}
|
|
}, [stateFromStores, stop, reset]);
|
|
useEffect(() => {
|
|
if (paused) {
|
|
stop();
|
|
} else {
|
|
reset();
|
|
}
|
|
}, [paused, stop, reset]);
|
|
return <View style={useMemo(() => [styles.profileEffects, style], [styles, style])} pointerEvents="none" onLayout={callback2}>
|
|
{memo.map((item, index) => {
|
|
const key = item.src + index;
|
|
let animate = state3[index];
|
|
if (animate == null) {
|
|
animate = false;
|
|
}
|
|
return <ProfileEffectLayer_android key={key} layerConfig={item} animate={animate} paused={paused} width={state2} accessibilityLabel={accessibilityLabel} onLoad={callback} loaded={ref.current} />;
|
|
})}
|
|
</View>;
|
|
};
|
|
export default function WrappedProfileEffect(props) {
|
|
const profileEffect2 = useProfileEffect(props.skuId);
|
|
const stateFromStores2 = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
|
|
const potentiallyRandomizedProfileEffect = usePotentiallyRandomizedProfileEffect(profileEffect2);
|
|
return potentiallyRandomizedProfileEffect != null ? !stateFromStores2 && !props.useThumbnail ? <ProfileEffect profileEffect={potentiallyRandomizedProfileEffect} {...props} /> : <StaticEffect profileEffect={potentiallyRandomizedProfileEffect} bannerAdjustment={props.bannerAdjustment} useThumbnail={props.useThumbnail} thumbnailUrlOverride={props.thumbnailUrlOverride} /> : null;
|
|
};
|
|
export function usePreloadProfileEffect(a0) {
|
|
let env16224;
|
|
const r1 = env16224 = {};
|
|
env16224[0] = a0;
|
|
const memo2 = useMemo($mk79773(r1), [a0]);
|
|
env16224[1] = memo2;
|
|
env16224[2] = useRef(memo2);
|
|
const ref7 = useRef(false);
|
|
env16224[3] = ref7;
|
|
useEffect($mk79774(r1), [memo2]);
|
|
return {
|
|
loaded: ref7,
|
|
onLayerLoaded: useCallback($mk79775(r1), [])
|
|
};
|
|
}
|