yeet

modules/collectibles/profile_effects/native/EditProfileEffectSection.tsx

@@ -0,0 +1,84 @@
+// Metro module 13724 (f13725).
+import { memo, useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { isProfileEffectRecord } from "../../records/ProfileEffectRecord";
+import { SAMPLE_PROFILE_ASPECT_RATIO } from "../../native/CollectiblesPreviewConstants";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import { GUTTER_SIZE, ROW_SIZE } from "../../native/useCollectibleListLayout";
+import { NONE_ITEM, SHOP_ITEM } from "../useProfileEffectSections";
+import { EditCollectiblesListItemNone, EditCollectiblesListItemShop, EditCollectiblesListItemProduct } from "../../native/CollectiblesEditUserProfileListItems";
+import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
+import useProfileEffect from "../useProfileEffect";
+import FastImage from "../../../../components_native/common/FastImage";
+import Module8695 from "../../../../_bundle/Module8695";
+import ProfileEffect from "./ProfileEffect";
+let Component;
+const useStyles = createStyles({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: GUTTER_SIZE
+  },
+  rowSpacer: {
+    height: GUTTER_SIZE
+  },
+  profileEffect: {
+    overflow: "hidden",
+    width: "100%",
+    height: "100%"
+  },
+  sampleProfile: {
+    aspectRatio: SAMPLE_PROFILE_ASPECT_RATIO,
+    width: "100%"
+  }
+});
+const r46 = memo((a0) => {
+  const { items, selectedSkuId, setSelectedProfileEffect, guildId, isTryItOut: isTryItOut2 = false } = a0;
+  const isTryItOut = isTryItOut2;
+  const size = a0.size;
+  const styles = useStyles();
+  const callback = useCallback(() => {
+    setSelectedProfileEffect(null);
+  }, [setSelectedProfileEffect]);
+  return <>
+    <View style={styles.row}>
+      {[...items, null, null].slice(0, ROW_SIZE).map((a0, index) => {
+        if (a0 === NONE_ITEM) {
+          return <EditCollectiblesListItemNone key="none" size={size} onPress={callback} isSelected={selectedSkuId == null} asDefault={guildId != null} />;
+        }
+        if (a0 === SHOP_ITEM) {
+          return <EditCollectiblesListItemShop key="shop" size={size} analyticsSource={AnalyticsLocation.EDIT_PROFILE_EFFECT_SHEET} />;
+        }
+        if (isProfileEffectRecord(a0)) {
+          return <Component key={a0.skuId} item={a0} isSelected={selectedSkuId === a0.skuId} setSelectedProfileEffect={setSelectedProfileEffect} isTryItOut={isTryItOut} size={size} />;
+        }
+        return <View key={index} style={{
+          height: size,
+          width: size
+        }} />;
+      })}
+    </View>
+    <View style={styles.rowSpacer} />
+  </>;
+});
+r46.displayName = "EditProfileEffectRow";
+Component = memo(({ item, isSelected, setSelectedProfileEffect: setSelectedProfileEffect2, isTryItOut: isTryItOut2 = false, size: size2 }) => {
+  const styles = useStyles();
+  const profileEffect = useProfileEffect(item.skuId);
+  let c20671_2 = profileEffect;
+  return <EditCollectiblesListItemProduct skuId={item.skuId} isSelected={isSelected} onPress={useCallback(() => {
+    setSelectedProfileEffect2(item);
+  }, [setSelectedProfileEffect2, item])} isTryItOut={isTryItOut2} size={size2} accessibilityLabel={profileEffect?.accessibilityLabel}>
+    <View style={[styles.profileEffect, {
+      borderRadius: 6
+    }]} accessible={false} importantForAccessibility="no">
+      <FastImage source={{
+        uri: Module8695
+      }} style={styles.sampleProfile} resizeMode="cover" />
+      <ProfileEffect skuId={item.skuId} bannerAdjustment={0} useThumbnail thumbnailUrlOverride={useMemo(() => c20671_2?.thumbnailPreviewSrc == null ? c20671_2?.thumbnailPreviewSrc : `${c20671_2.thumbnailPreviewSrc}?width=100&height=195`, [profileEffect?.thumbnailPreviewSrc])} />
+    </View>
+  </EditCollectiblesListItemProduct>;
+});
+Component.displayName = "EditProfileEffectItem";
+export { r46 as EditProfileEffectRow };

modules/collectibles/profile_effects/native/ProfileEffect.tsx

@@ -0,0 +1,259 @@
+// 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), [])
+  };
+}

modules/collectibles/profile_effects/native/ProfileEffectLayer.android.tsx

@@ -0,0 +1,23 @@
+// Metro module 8065 (f8066).
+import { memo, useRef, useEffect } from "react";
+import { StyleSheet } from "react-native";
+import { useAPNGPlayerControls, APNGPlayer } from "../../../image/native/APNGPlayer.android";
+import { calculateProfileEffectHeight } from "./ProfileEffectUtils";
+const r22 = memo(function({ layerConfig, animate, paused, width, accessibilityLabel, onLoad }) {
+  const ref = useRef(null);
+  const aPNGPlayerControls = useAPNGPlayerControls(ref);
+  useEffect(() => {
+    if (animate && !paused) {
+      aPNGPlayerControls.play();
+    } else {
+      aPNGPlayerControls.pause();
+    }
+  }, [animate, paused, aPNGPlayerControls]);
+  return <APNGPlayer ref={ref} url={layerConfig.src} autoplay={false} style={[StyleSheet.absoluteFill, {
+    position: "absolute",
+    width,
+    height: calculateProfileEffectHeight(layerConfig, width),
+    opacity: animate ? 1 : 0
+  }]} ariaLabel={accessibilityLabel} onLoad={onLoad} />;
+});
+export default r22;

modules/collectibles/profile_effects/native/ProfileEffectUtils.tsx

@@ -0,0 +1,17 @@
+// Metro module 8062 (f8063).
+import { getAssetWHRatio } from "./getAssetWHRatio";
+export function shouldAnimate(a0, a1) {
+  if (a1 >= a0.start) {
+    if (!a0.loop && a1 > a0.duration + a0.start) {
+      return false;
+    }
+    if (a0.loop && a0.loopDelay !== void 0 && a0.loopDelay > 0 && (a1 - a0.start) % (a0.duration + a0?.loopDelay) > a0.duration) {
+      return false;
+    }
+    return true;
+  }
+  return false;
+}
+export function calculateProfileEffectHeight(a0, a1) {
+  return a1 / getAssetWHRatio(a0);
+}

modules/collectibles/profile_effects/native/getAssetWHRatio.tsx

@@ -0,0 +1,13 @@
+// Metro module 8063 (f8064).
+export const DEFAULT_PROFILE_EFFECT_WH_RATIO = 0.5113636363636364;
+export function getAssetWHRatio(a0) {
+  let width = a0.width;
+  if (!(width != null && !(width <= 0))) {
+    width = 450;
+  }
+  let height = a0.height;
+  if (!(height != null && !(height <= 0))) {
+    height = 880;
+  }
+  return width / height;
+}

modules/collectibles/profile_effects/native/previews/ProfileEffectUserPreview.tsx

@@ -0,0 +1,9 @@
+// Metro module 8075 (f8076).
+import UserProfilePreview from "../../../../user_profile/native/UserProfilePreview";
+import { intl, t } from "../../../../../intl/index.native";
+export default function ProfileEffectUserPreview(props) {
+  const { profileEffect, ...props2 } = props;
+  return <UserProfilePreview profileEffectOverride={profileEffect} accessibilityLabel={profileEffect != null ? intl.formatToPlainString(t.mbHmX2, {
+    a11y_text: profileEffect.accessibilityLabel
+  }) : intl.string(t.XYdHeC)} {...props2} />;
+};