discord-decomp/modules/collectibles/native/BundleSampleV2.tsx

// Metro module 8056 (f8057).
import { PixelRatio, View, StyleSheet } from "react-native";
import { BUNDLE_PREVIEW_CONFIG } from "./CollectiblesPreviewConstants";
import FastImage from "../../../components_native/common/FastImage";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module712 from "../../../_bundle/Module712";
import Module38 from "../../../_bundle/Module38";
import { CollectiblesItemType } from "../../../_bundle/Module1901";
import { getNameplateData } from "../nameplates/utils";
import ProfileEffectSampleV2 from "./ProfileEffectSampleV2";
import AvatarDecorationSampleV2 from "./AvatarDecorationSampleV2";
import { NameplateDummyUserPreview } from "../nameplates/native/NameplateDummyUserPreview";
import { AvatarSizes } from "../../../design/void/native";
import { useCollectiblesMobileFlexibleBundlesExperiment } from "../experiments/CollectiblesMobileFlexibleBundlesExperiment";
let styles, useStyles, BundleSampleV2Composed, BundleSampleV2StaticPreview;
const BundleStaticPreviewContent = function BundleStaticPreviewContent(props) {
  const { previewAssets, disableBackground, mutedBackground, targetSize } = props;
  const { bgStatic, fgStatic } = previewAssets;
  const r1 = bgStatic != null;
  let r11 = null;
  if (r1) {
    let uri = bgStatic;
    if (targetSize != null) {
      const r34 = bgStatic.startsWith("https://cdn.discordapp.com");
      uri = bgStatic;
      if (r34) {
        const r38 = Math.min(PixelRatio.get(), 2);
        const r17 = Math.round(targetSize.width * r38);
        const r16 = Math.round(targetSize.height * r38);
        uri = `${bgStatic}${bgStatic.includes("?") ? "&" : "?"}width=${r17}&height=${r16}`;
      }
    }
    r11 = <FastImage source={{
      uri
    }} style={styles.bgImage} resizeMode="cover" accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />;
  }
  const r71 = [(disableBackground ? !disableBackground : r11 != null) && <View style={styles.bgBleedClip} pointerEvents="none">
    {mutedBackground ? <View style={styles.bgMutedWrap} pointerEvents="none">{r11}</View> : r11}
  </View>, ,];
  let r72 = fgStatic != null;
  if (r72) {
    let uri2 = fgStatic;
    if (targetSize != null) {
      const r84 = fgStatic.startsWith("https://cdn.discordapp.com");
      uri2 = fgStatic;
      if (r84) {
        const r92 = Math.min(PixelRatio.get(), 2);
        const r19 = Math.round(targetSize.width * r92);
        const r101 = Math.round(targetSize.height * r92);
        uri2 = `${fgStatic}${fgStatic.includes("?") ? "&" : "?"}width=${r19}&height=${r101}`;
      }
    }
    r72 = <View style={styles.fgClip} pointerEvents="none">
      <FastImage source={{
        uri: uri2
      }} style={styles.fgImage} resizeMode="cover" accessibilityElementsHidden importantForAccessibility="no-hide-descendants" />
    </View>;
  }
  r71[1] = r72;
  return <View style={styles.container}>{r71}</View>;
};
BundleSampleV2Composed = function BundleSampleV2Composed(props) {
  const { deco, pfx, nameplate, size = "small" } = props;
  const styles2 = useStyles(size);
  const r1 = nameplate != null;
  let nameplate2 = void 0;
  if (r1) {
    Module38(nameplate.type === CollectiblesItemType.NAMEPLATE, "Item must be Nameplate");
    nameplate2 = getNameplateData(nameplate);
  }
  const r33 = BUNDLE_PREVIEW_CONFIG[size];
  const size2 = nameplate2 != null ? r33.avatarDecorationSizeTriple : r33.avatarDecorationSize;
  return <View style={styles2.bundle}>
    {pfx != null && <View style={styles2.pfx}>
      <ProfileEffectSampleV2 item={pfx} />
    </View>}
    {deco != null && <View style={[nameplate2 != null ? styles2.avatarWithNameplate : styles2.avatar]}>
      <AvatarDecorationSampleV2 item={deco} size={size2} threeTierBundle={nameplate2 != null} />
    </View>}
    {nameplate2 != null ? <View style={styles2.nameplate}>
      <NameplateDummyUserPreview width={r33.nameplatePreviewWidth} avatarSize={size === "large" ? AvatarSizes.NORMAL : AvatarSizes.XSMALL_20} nameplate={nameplate2} />
    </View> : null}
  </View>;
};
BundleSampleV2StaticPreview = function BundleSampleV2StaticPreview(props) {
  const { previewAssets, disableStaticBackground, mutedStaticBackground, targetSize, composedFallbackProps } = props;
  return useCollectiblesMobileFlexibleBundlesExperiment(props.exposureLocation).enabled ? <BundleStaticPreviewContent previewAssets={previewAssets} disableBackground={disableStaticBackground} mutedBackground={mutedStaticBackground} targetSize={targetSize} /> : <BundleSampleV2Composed {...composedFallbackProps} />;
};
styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    overflow: "hidden"
  },
  bgBleedClip: {
    ...StyleSheet.absoluteFillObject,
    overflow: "hidden",
    justifyContent: "center",
    alignItems: "center"
  },
  bgMutedWrap: {
    ...StyleSheet.absoluteFillObject,
    opacity: 0.8
  },
  bgImage: {
    width: "100%",
    height: "100%"
  },
  fgClip: {
    ...StyleSheet.absoluteFillObject,
    overflow: "hidden",
    justifyContent: "center",
    alignItems: "center"
  },
  fgImage: {
    ...StyleSheet.absoluteFillObject
  }
});
useStyles = createStyles((a0) => {
  const r5 = BUNDLE_PREVIEW_CONFIG[a0];
  return {
    bundle: {
      width: r5.bundleWidth,
      height: r5.bundleHeight,
      borderRadius: Module712.radii.xs
    },
    pfx: {
      position: "absolute",
      top: r5.pfxTop,
      left: r5.pfxLeft,
      width: r5.pfxWidth,
      height: r5.pfxHeight,
      backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
      transform: [{
        rotate: "-8deg"
      }],
      zIndex: 0,
      overflow: "hidden",
      borderRadius: Module712.radii.xs
    },
    avatar: {
      position: "absolute",
      top: r5.avatarTop,
      right: r5.avatarRight,
      transform: [{
        rotate: "8deg"
      }],
      zIndex: 1,
      alignItems: "center",
      justifyContent: "center"
    },
    avatarWithNameplate: {
      position: "absolute",
      top: r5.avatarWithNameplateTop,
      right: r5.avatarWithNameplateRight,
      transform: [{
        rotate: "8deg"
      }],
      zIndex: 1,
      alignItems: "center",
      justifyContent: "center",
      shadowColor: Module712.colors.BLACK,
      shadowOffset: {
        width: 0,
        height: 4
      },
      shadowOpacity: 0.5,
      shadowRadius: 4
    },
    nameplate: {
      position: "absolute",
      bottom: r5.nameplateBottom,
      marginHorizontal: 10,
      width: "90%",
      backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
      zIndex: 2,
      borderRadius: Module712.radii.sm,
      shadowColor: Module712.colors.BLACK,
      shadowOffset: {
        width: 0,
        height: 4
      },
      shadowOpacity: 0.5,
      shadowRadius: 4
    }
  };
});
export default function BundleSampleV2(props) {
  const { deco, pfx, nameplate, size = "small", previewAssets, disableStaticBackground = false, mutedStaticBackground = false, targetSize, exposureLocation = "CollectiblesShopCardAssetTileV2" } = props;
  const composedFallbackProps = {
    deco,
    pfx,
    nameplate,
    size
  };
  return previewAssets?.fgStatic != null ? <BundleSampleV2StaticPreview previewAssets={previewAssets} disableStaticBackground={disableStaticBackground} mutedStaticBackground={mutedStaticBackground} targetSize={targetSize} composedFallbackProps={composedFallbackProps} exposureLocation={exposureLocation} /> : <BundleSampleV2Composed {...composedFallbackProps} />;
};