yeet

modules/game_profile/native/components/GameProfileSimilarGames.tsx

@@ -0,0 +1,137 @@
+// Metro module 11922 (f11923).
+import { useCallback } from "react";
+import { Image as Image2, Pressable, View } from "react-native";
+import Module712 from "../../../../_bundle/Module712";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import useShouldOpenGameProfileModal from "../../hooks/useShouldOpenGameProfileModal";
+import { GameProfileSources, GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
+import GameProfileActionCreators_native from "../../GameProfileActionCreators.native";
+import { intl, t } from "../../../../intl/index.native";
+import { Text } from "../../../../design/components/Text/native/Text";
+import { GameProfileSimilarGamesMobileExperiment } from "../../SimilarGamesExperiments";
+import useSimilarGames from "../../hooks/useSimilarGames";
+import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
+import { FlashList } from "../../../../_bundle/noop_6676";
+let PX_12, PX_16, PX_122, useStyles, ListPadding, SimilarGameCard, LoadingCard;
+const Spacer = function Spacer() {
+  return <View style={{
+    width: PX_12
+  }} />;
+};
+ListPadding = function ListPadding() {
+  return <View style={{
+    width: Module712.space.PX_16
+  }} />;
+};
+SimilarGameCard = function SimilarGameCard(props) {
+  const { game, trackAction, cardWidth: cardWidth2 } = props;
+  const styles = useStyles();
+  const height = 1.34 * cardWidth2;
+  const coverURL = game.getCoverURL(Math.ceil(height));
+  const r10 = {
+    width: cardWidth2,
+    height
+  };
+  const shouldOpenGameProfileModal = useShouldOpenGameProfileModal({
+    gameId: game.id,
+    source: GameProfileSources.SimilarGames
+  });
+  const { shouldOpenGameProfile, gameId } = shouldOpenGameProfileModal;
+  return <Pressable style={[styles.card, {
+    width: cardWidth2
+  }]} onPress={useCallback(() => {
+    trackAction(GameProfileTrackActionActions.ClickSimilarGame, game.id);
+    let r14 = shouldOpenGameProfile;
+    if (shouldOpenGameProfile) {
+      r14 = gameId != null;
+    }
+    if (r14) {
+      GameProfileActionCreators_native.openGameProfileModal({
+        gameId,
+        gameProfileModalChecks: {
+          shouldOpenGameProfile: true,
+          gameId
+        },
+        source: GameProfileSources.SimilarGames
+      });
+    }
+  }, [game.id, trackAction, shouldOpenGameProfile, gameId])} accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t["8QLQB+"], {
+    gameName: game.name
+  })}>
+    {coverURL != null ? <Image2 source={{
+      uri: coverURL
+    }} style={[styles.coverArt, r10]} /> : <View style={[styles.coverArtFallback, r10]}>
+      <Text variant="text-xs/medium" color="text-overlay-light" lineClamp={3}>{game.name}</Text>
+    </View>}
+  </Pressable>;
+};
+LoadingCard = function LoadingCard(props) {
+  const cardWidth2 = props.cardWidth;
+  return <View style={{
+    width: cardWidth2
+  }}>
+    <View style={[useStyles().loadingArt, {
+      width: cardWidth2,
+      height: 1.34 * cardWidth2
+    }]} />
+  </View>;
+};
+PX_12 = Module712.space.PX_12;
+PX_16 = Module712.space.PX_16;
+PX_122 = Module712.space.PX_12;
+useStyles = createStyles({
+  container: {
+    gap: Module712.space.PX_8,
+    marginHorizontal: -1 * Module712.space.PX_16
+  },
+  header: {
+    paddingHorizontal: Module712.space.PX_16
+  },
+  card: {
+    gap: Module712.space.PX_4
+  },
+  coverArt: {
+    borderRadius: Module712.radii.sm
+  },
+  coverArtFallback: {
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: Module712.space.PX_8
+  },
+  loadingArt: {
+    borderRadius: Module712.radii.sm,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+export default function GameProfileSimilarGames(props) {
+  const { gameId: gameId2, trackAction: trackAction2 } = props;
+  const styles = useStyles();
+  const config = GameProfileSimilarGamesMobileExperiment.useConfig({
+    location: "GameProfileSimilarGames"
+  });
+  const { enabled, dense } = config;
+  const similarGames2 = useSimilarGames(gameId2, enabled);
+  const { isFetching, similarGames } = similarGames2;
+  const length = dense ? 4 : 3;
+  const cardWidth = (useWindowDimensions_native().width - 2 * PX_16 - (length - 1) * PX_12 - PX_122) / length;
+  const data = Array.from({
+    length
+  }, (a0, a1) => a1);
+  return isFetching ? <View style={styles.container}>
+    <View style={styles.header}>
+      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
+        {intl.string(t["6rLyQB"])}
+      </Text>
+    </View>
+    <FlashList horizontal data={data} renderItem={() => <LoadingCard cardWidth={cardWidth} />} showsHorizontalScrollIndicator={false} ItemSeparatorComponent={Spacer} ListHeaderComponent={ListPadding} ListFooterComponent={ListPadding} />
+  </View> : similarGames.length !== 0 ? <View style={styles.container}>
+    <View style={styles.header}>
+      <Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
+        {intl.string(t["6rLyQB"])}
+      </Text>
+    </View>
+    <FlashList horizontal data={similarGames} renderItem={(info) => <SimilarGameCard game={info.item} trackAction={trackAction2} cardWidth={cardWidth} />} showsHorizontalScrollIndicator={false} ItemSeparatorComponent={Spacer} ListHeaderComponent={ListPadding} ListFooterComponent={ListPadding} decelerationRate="fast" snapToInterval={cardWidth + PX_12} />
+  </View> : null;
+};