discord-decomp/modules/video_calls/native/components/ActivityTile.tsx

// Metro module 10601 (f10602).
import { View } from "react-native";
import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
import UserStore from "../../../../stores/UserStore";
import { ThemeTypes, Fonts } from "../../../../Constants";
import { getThemedRippleConfig } from "../../../../design/void/Form/native/FormConstants";
import { ActivityLayoutMode } from "../../../activities/Constants";
import { SummarizedIconRow, OverflowText, CutoutableAvatarImage, AVATAR_SIZE_MAP, CutoutDirection, LegacyText, AvatarSizes } from "../../../../design/void/native";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import Module712 from "../../../../_bundle/Module712";
import { useStateFromStoresArray, useStateFromStores } from "../../../../_bundle/Module589";
import { isNotNullish } from "../../../../utils/GlobalUtils";
import useGetOrFetchApplications from "../../../applications/useGetOrFetchApplications";
import NicknameUtils from "../../../../utils/NicknameUtils";
import UserUtils from "../../../../utils/UserUtils";
import useCurrentEmbeddedApplication from "../../../activities/utils/useCurrentEmbeddedApplication";
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
import AnalyticsLocation from "../../../app_analytics/AnalyticsLocation";
import { useAnalyticsContext } from "../../../../hooks/analytics";
import { intl, t } from "../../../../intl/index.native";
import { useEmbeddedActivityJoinability, EmbeddedActivityJoinability } from "../../../activities/utils/getEmbeddedActivityJoinability";
import handleJoinEmbeddedActivity from "../../../activities/handleJoinEmbeddedActivity";
import { setOrientationLockState } from "../../../activities/native/getDefaultOrientationLockState";
import handlePressJoinActivity from "../../../activities/handlePressJoinActivity";
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
import EmbeddedActivityView from "../../../activities/native/EmbeddedActivityView";
import EmbeddedActivityBackgroundImageWithOverlay from "../../../activities/native/EmbeddedActivityBackgroundImageWithOverlay";
import { Text } from "../../../../design/components/Text/native/Text";
import { BaseTextButton } from "../../../../design/components/Button/native/BaseTextButton.native";
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
let XSMALL, themedRippleConfig, useStyles;
const ActivityTileInner = function ActivityTileInner(props) {
  let r197;
  let c18141_3, stateFromStores, analyticsLocations, analyticsContext, embeddedActivityJoinability, _handleCanJoin2;
  let participant2;
  const { participant, style, channel, onSingleTap } = props;
  c18141_3 = void 0;
  stateFromStores = void 0;
  analyticsLocations = void 0;
  analyticsContext = void 0;
  embeddedActivityJoinability = void 0;
  const handleCanJoin2 = function handleCanJoin() {
    return _handleCanJoin2.apply(this, arguments);
  };
  _handleCanJoin2 = function _handleCanJoin() {
    const r9 = async () => {
      let c30238_0;
      L15: {
        c30238_0 = void 0;
        if (stateFromStores != null && c18141_3 != null) {
          await handleJoinEmbeddedActivity({
            applicationId: stateFromStores.applicationId,
            activityChannelId: channel.id,
            locationObject: analyticsContext.location,
            analyticsLocations
          });
          setOrientationLockState(c18141_3);
          break L15;
        }
        return void 0;
      }
    };
    _handleCanJoin2 = r9;
    return r9.apply(this, arguments);
  };
  const styles = useStyles();
  const [application] = useGetOrFetchApplications([participant.applicationId]);
  c18141_3 = application;
  participant2 = participant;
  const stateFromStoresArray = useStateFromStoresArray([UserStore], () => Array.from(participant2.participants).map((item) => UserStore.getUser(item.userId)).filter(isNotNullish));
  let username = NicknameUtils.getName(channel.getGuildId(), channel.id, stateFromStoresArray == null ? void 0 : stateFromStoresArray[0]);
  if (username == null) {
    username = UserUtils.getName(stateFromStoresArray == null ? void 0 : stateFromStoresArray[0]);
  }
  const currentEmbeddedApplication = useCurrentEmbeddedApplication();
  stateFromStores = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getEmbeddedActivitiesForChannelIncludingHidden(channel.id).find((item) => item.applicationId === c18141_3?.id));
  analyticsLocations = useAnalyticsLocations(AnalyticsLocation.ACTIVITY_TILE).analyticsLocations;
  analyticsContext = useAnalyticsContext();
  let applicationName = application?.name;
  if (applicationName == null) {
    applicationName = intl.string(t.WCNe7F);
  }
  const id = UserStore.getCurrentUser()?.id;
  const r86 = currentEmbeddedApplication != null && currentEmbeddedApplication.id === application?.id || id != null && (stateFromStores == null ? void 0 : stateFromStores.userIds.has(id));
  embeddedActivityJoinability = useEmbeddedActivityJoinability({
    userId: UserStore.getCurrentUser()?.id,
    channelId: channel.id,
    application
  });
  const CAN_JOIN = EmbeddedActivityJoinability.CAN_JOIN;
  const r25 = stateFromStoresArray.length > 1 ? intl.formatToPlainString(t.cpe6CK, {
    username,
    count: stateFromStoresArray.length - 1
  }) : intl.formatToPlainString(t["7Uuia2"], {
    username
  });
  if (r86) {
    r197 = <PressableOpacity pointerEvents="box-only" style={styles.activityViewContainer} onPress={onSingleTap} activeOpacity={1}>
      <EmbeddedActivityView channel={channel} layoutMode={ActivityLayoutMode.PIP} />
    </PressableOpacity>;
  } else {
    const handleTileOrButtonPress = function handleTileOrButtonPress() {
      handlePressJoinActivity({
        embeddedActivityJoinability,
        handleCanJoin: handleCanJoin2
      });
      if (onSingleTap != null) {
        onSingleTap();
      }
    };
    r197 = <PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t.Yw5Hr2, {
      applicationName
    })} androidRippleConfig={themedRippleConfig} onPress={handleTileOrButtonPress} style={styles.pressableOpacity}>
      <EmbeddedActivityBackgroundImageWithOverlay application={application} resizeMode="cover" />
      <View style={[styles.activityPreview, style]}>
        <SummarizedIconRow offsetAmount={-6} overflowStyle={styles.overflow} overflowComponent={OverflowText} items={stateFromStoresArray} max={4} renderItem={(info, a1) => {
          let guildId = participant.guildId;
          if (guildId == null) {
            guildId = void 0;
          }
          return <CutoutableAvatarImage user={info} guildId={guildId} size={XSMALL} cutout={a1 ? void 0 : {
            radius: AVATAR_SIZE_MAP[XSMALL] / 2 + 3,
            direction: CutoutDirection.RIGHT,
            inset: -6
          }} />;
        }} />
        <Text style={styles.subtitleText} lineClamp={2} variant="text-sm/normal">{r25}</Text>
        <LegacyText style={styles.titleText}>{applicationName}</LegacyText>
        {embeddedActivityJoinability === CAN_JOIN ? <View style={styles.buttonWrapper}>
          <BaseTextButton onPress={handleTileOrButtonPress} pillStyle={styles.buttonPill} text={intl.string(t["4i2vj+"])} variant="secondary" />
        </View> : null}
      </View>
    </PressableOpacity>;
  }
  return r197;
};
XSMALL = AvatarSizes.XSMALL;
themedRippleConfig = getThemedRippleConfig({
  foreground: true
});
useStyles = createStyles({
  pressableOpacity: {
    width: "100%",
    height: "100%",
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH,
    justifyContent: "center",
    alignItems: "center"
  },
  activityPreview: {
    alignItems: "center",
    display: "flex",
    width: "100%",
    padding: 16
  },
  activityViewContainer: {
    flex: 1,
    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
  },
  titleText: {
    fontSize: 16,
    lineHeight: 24,
    color: Module712.colors.TEXT_DEFAULT,
    fontFamily: Fonts.DISPLAY_EXTRABOLD,
    textAlign: "center",
    marginLeft: 16,
    marginRight: 16
  },
  subtitleText: {
    textAlign: "center",
    marginLeft: 16,
    marginRight: 16
  },
  overflow: {
    height: AVATAR_SIZE_MAP[XSMALL],
    backgroundColor: Module712.colors.BACKGROUND_MOD_NORMAL
  },
  buttonWrapper: {
    marginTop: 8,
    alignSelf: "center"
  },
  buttonPill: {
    borderRadius: 100
  }
});
export default function ActivityTile(props) {
  return <ThemeContextProvider theme={ThemeTypes.DARK}>
    <ActivityTileInner {...props} />
  </ThemeContextProvider>;
};