377 lines
14 KiB
TypeScript
377 lines
14 KiB
TypeScript
// Metro module 8650 (f8651).
|
|
import { memo, useCallback } from "react";
|
|
import { ActivityIndicator, Image as Image2, Pressable, ScrollView, View } from "react-native";
|
|
import { getParser } from "../../../markup/CustomMarkup.native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { getPosterUrl, getPollExpiryLabel } from "../../AnnouncementMessageUtils";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { ImageWithPlaceholder } from "../../../../components_native/common/ImageWithPlaceholder";
|
|
import { dateFormat } from "../../../../utils/DateUtils";
|
|
import { ReactionIcon } from "../../../../design/components/Icon/native/redesign/generated/ReactionIcon";
|
|
import useAnalyticsLocations from "../../../app_analytics/useAnalyticsLocations";
|
|
import useGameAnnouncements from "../../hooks/useGameAnnouncements";
|
|
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
|
|
import GameProfileActionCreators_native from "../../GameProfileActionCreators.native";
|
|
import navigateToGameAnnouncement from "../../navigateToGameAnnouncement";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { ChevronSmallRightIcon } from "../../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
|
|
let c5627_12, parser, c5627_14, useStyles, MessageAnnouncementCard, PollAnnouncementCard, Component;
|
|
const EmbedAnnouncementCard = function EmbedAnnouncementCard(props) {
|
|
const { message, onPress: onPress2, guildId: guildId2, channelId: channelId2 } = props;
|
|
const styles2 = useStyles();
|
|
if (parser == null) {
|
|
parser = getParser();
|
|
}
|
|
const r23 = parser;
|
|
let r43 = message.media?.proxyUrl;
|
|
if (r43 == null) {
|
|
r43 = message.media?.url;
|
|
}
|
|
let uri = r43 != null ? getPosterUrl(r43, 160, c5627_12) : null;
|
|
if (uri == null) {
|
|
uri = r43;
|
|
}
|
|
const embedSource = message.embedSource;
|
|
if (embedSource == null) {
|
|
return null;
|
|
}
|
|
const r14 = embedSource.color != null ? {
|
|
borderLeftColor: embedSource.color
|
|
} : void 0;
|
|
const props2 = {
|
|
style: styles2.card,
|
|
onPress: () => onPress2(message.id),
|
|
accessibilityRole: "button",
|
|
accessibilityLabel: message.title,
|
|
children: null
|
|
};
|
|
const r70 = [embedSource.url != null && <Text variant="text-xs/medium" color="text-link" lineClamp={1}>{embedSource.url}</Text>, ,];
|
|
const r90 = [embedSource.authorName != null && <View style={styles2.embedAuthorRow}>
|
|
{embedSource.authorIconUrl != null && <Image2 source={{
|
|
uri: embedSource.authorIconUrl
|
|
}} style={styles2.embedAuthorIcon} />}
|
|
<Text variant="text-xs/semibold" color="text-strong" lineClamp={1}>{embedSource.authorName}</Text>
|
|
</View>, message.media != null && uri != null && <View style={styles2.embedMedia}>
|
|
<ImageWithPlaceholder uri={uri} placeholder={message.media.placeholder} placeholderVersion={message.media.placeholderVersion} style={styles2.mediaImage} />
|
|
</View>, message.title != null && <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={2}>
|
|
{r23(message.title, true, {
|
|
guildId: guildId2,
|
|
channelId: channelId2
|
|
})}
|
|
</Text>, message.body.length > 0 && <Text variant="text-sm/medium" color="text-default" lineClamp={3}>
|
|
{r23(message.body, true, {
|
|
guildId: guildId2,
|
|
channelId: channelId2
|
|
})}
|
|
</Text>, ,];
|
|
const r142 = [embedSource.providerIconUrl != null && <Image2 source={{
|
|
uri: embedSource.providerIconUrl
|
|
}} style={styles2.embedProviderIcon} />, <Text variant="text-xs/medium" color="text-muted">
|
|
{embedSource.providerName != null ? `${embedSource.providerName} · ` : ""}
|
|
{dateFormat(new Date(message.timestamp), "LL")}
|
|
</Text>, ,];
|
|
let r169 = message.reactionCount > 0;
|
|
if (r169) {
|
|
const r182 = [<ReactionIcon size="xs" color={Module712.colors.TEXT_MUTED} />, ,];
|
|
const reactionCount = message.reactionCount;
|
|
if (!(c5627_14 != null && c5627_14.locale === intl.currentLocale)) {
|
|
c5627_14 = {
|
|
locale: intl.currentLocale,
|
|
format: new Intl.NumberFormat(intl.currentLocale)
|
|
};
|
|
}
|
|
r182[1] = <Text variant="text-xs/medium" color="text-muted">
|
|
{c5627_14.format.format(reactionCount)}
|
|
</Text>;
|
|
r169 = <View style={styles2.reactionInfo}>{r182}</View>;
|
|
}
|
|
r142[2] = r169;
|
|
r90[4] = <View style={styles2.metadataRow}>{r142}</View>;
|
|
r70[1] = <View style={[styles2.embedContentArea, r14]}>{r90}</View>;
|
|
props2.children = <View style={styles2.cardBody}>{r70}</View>;
|
|
return <Pressable {...props2} />;
|
|
};
|
|
MessageAnnouncementCard = function MessageAnnouncementCard(props) {
|
|
const { message: message2, onPress: onPress3, guildId: guildId2, channelId: channelId2 } = props;
|
|
const styles2 = useStyles();
|
|
if (parser == null) {
|
|
parser = getParser();
|
|
}
|
|
const r20 = parser;
|
|
let r39 = message2.media?.proxyUrl;
|
|
if (r39 == null) {
|
|
r39 = message2.media?.url;
|
|
}
|
|
let uri = r39 != null ? getPosterUrl(r39, 160, c5627_12) : null;
|
|
if (uri == null) {
|
|
uri = r39;
|
|
}
|
|
const props2 = {
|
|
style: styles2.card,
|
|
onPress: () => onPress3(message2.id),
|
|
accessibilityRole: "button",
|
|
accessibilityLabel: message2.title,
|
|
children: null
|
|
};
|
|
const children = [message2.media != null && uri != null && <View style={styles2.smallCardMedia}>
|
|
<ImageWithPlaceholder uri={uri} placeholder={message2.media.placeholder} placeholderVersion={message2.media.placeholderVersion} style={styles2.mediaImage} />
|
|
</View>, ,];
|
|
const r83 = [message2.title != null && <Text variant="text-md/semibold" color="mobile-text-heading-primary" lineClamp={2}>
|
|
{r20(message2.title, true, {
|
|
guildId: guildId2,
|
|
channelId: channelId2
|
|
})}
|
|
</Text>, message2.body.length > 0 && <Text variant="text-sm/medium" color="text-default" lineClamp={3}>
|
|
{r20(message2.body, true, {
|
|
guildId: guildId2,
|
|
channelId: channelId2
|
|
})}
|
|
</Text>, ,];
|
|
const r115 = [<Text variant="text-xs/medium" color="text-muted">
|
|
{dateFormat(new Date(message2.timestamp), "LL")}
|
|
</Text>, ,];
|
|
let r117 = message2.reactionCount > 0;
|
|
if (r117) {
|
|
const r130 = [<ReactionIcon size="xs" color={Module712.colors.TEXT_MUTED} />, ,];
|
|
const reactionCount = message2.reactionCount;
|
|
if (!(c5627_14 != null && c5627_14.locale === intl.currentLocale)) {
|
|
c5627_14 = {
|
|
locale: intl.currentLocale,
|
|
format: new Intl.NumberFormat(intl.currentLocale)
|
|
};
|
|
}
|
|
r130[1] = <Text variant="text-xs/medium" color="text-muted">
|
|
{c5627_14.format.format(reactionCount)}
|
|
</Text>;
|
|
r117 = <View style={styles2.reactionInfo}>{r130}</View>;
|
|
}
|
|
r115[1] = r117;
|
|
r83[2] = <View style={styles2.metadataRow}>{r115}</View>;
|
|
children[1] = <View style={styles2.cardBody}>{r83}</View>;
|
|
props2.children = children;
|
|
return <Pressable {...props2} />;
|
|
};
|
|
PollAnnouncementCard = function PollAnnouncementCard(props) {
|
|
const { message: message3, onPress: onPress4 } = props;
|
|
const styles = useStyles();
|
|
const poll = message3.poll;
|
|
if (poll == null) {
|
|
return null;
|
|
}
|
|
const r15 = poll.answers.slice(0, 3);
|
|
const count = poll.answers.length - r15.length;
|
|
return <Pressable style={styles.card} onPress={() => onPress4(message3.id)} accessibilityRole="button" accessibilityLabel={poll.question.text}>
|
|
<View style={styles.cardBody}>
|
|
<Text variant="text-md/semibold" color="mobile-text-heading-primary">{poll.question.text}</Text>
|
|
<View style={styles.pollAnswers}>
|
|
{r15.map((item) => {
|
|
let text = item.poll_media.text;
|
|
if (text == null) {
|
|
text = "";
|
|
}
|
|
return <View key={item.answer_id} style={styles.pollAnswerOption}>
|
|
<Text variant="text-sm/medium" color="text-default" lineClamp={1}>{text}</Text>
|
|
</View>;
|
|
})}
|
|
{count > 0 && <Text variant="text-xs/medium" color="text-muted" style={styles.pollMoreOptions}>
|
|
{intl.format(t["mv/nIa"], {
|
|
count
|
|
})}
|
|
</Text>}
|
|
</View>
|
|
<View style={styles.metadataRow}>
|
|
<Text variant="text-xs/medium" color="text-muted">
|
|
{intl.format(t.t0FTsH, {
|
|
createdAt: new Date(message3.timestamp),
|
|
expiryLabel: getPollExpiryLabel(poll)
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</Pressable>;
|
|
};
|
|
c5627_12 = 120;
|
|
parser = null;
|
|
c5627_14 = null;
|
|
useStyles = createStyles({
|
|
container: {
|
|
gap: Module712.space.PX_8
|
|
},
|
|
smallCardsScroller: {
|
|
marginHorizontal: -Module712.space.PX_16,
|
|
overflow: "visible"
|
|
},
|
|
smallCardsContainer: {
|
|
flexDirection: "row",
|
|
gap: Module712.space.PX_12,
|
|
paddingHorizontal: Module712.space.PX_16
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
paddingHorizontal: Module712.space.PX_8
|
|
},
|
|
loadingContainer: {
|
|
height: 120,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
card: {
|
|
flexDirection: "column",
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOW,
|
|
borderWidth: 1,
|
|
borderColor: Module712.colors.BORDER_SUBTLE,
|
|
width: 160
|
|
},
|
|
cardBody: {
|
|
flex: 1,
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_4,
|
|
overflow: "hidden",
|
|
padding: Module712.space.PX_12
|
|
},
|
|
smallCardMedia: {
|
|
height: 120,
|
|
overflow: "hidden",
|
|
flexShrink: 0
|
|
},
|
|
mediaImage: {
|
|
width: "100%",
|
|
height: "100%",
|
|
resizeMode: "cover"
|
|
},
|
|
metadataRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8,
|
|
marginTop: "auto"
|
|
},
|
|
reactionInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_4
|
|
},
|
|
embedContentArea: {
|
|
flex: 1,
|
|
gap: Module712.space.PX_4,
|
|
borderLeftWidth: 4,
|
|
borderLeftColor: Module712.colors.BORDER_SUBTLE,
|
|
borderTopLeftRadius: Module712.radii.xs,
|
|
borderBottomLeftRadius: Module712.radii.xs,
|
|
paddingLeft: Module712.space.PX_8
|
|
},
|
|
embedAuthorRow: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_4
|
|
},
|
|
embedAuthorIcon: {
|
|
width: 20,
|
|
height: 20,
|
|
borderRadius: Module712.radii.round
|
|
},
|
|
embedProviderIcon: {
|
|
width: 16,
|
|
height: 16
|
|
},
|
|
embedMedia: {
|
|
overflow: "hidden",
|
|
borderRadius: Module712.radii.sm,
|
|
aspectRatio: 1.7777777777777777
|
|
},
|
|
pollAnswers: {
|
|
flexDirection: "column",
|
|
gap: Module712.space.PX_4,
|
|
flex: 1
|
|
},
|
|
pollAnswerOption: {
|
|
paddingVertical: Module712.space.PX_8,
|
|
paddingHorizontal: Module712.space.PX_12,
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
pollMoreOptions: {
|
|
paddingHorizontal: Module712.space.PX_12
|
|
}
|
|
});
|
|
Component = memo(function(a0) {
|
|
return a0.message.poll != null ? <PollAnnouncementCard {...a0} /> : a0.message.embedSource != null ? <EmbedAnnouncementCard {...a0} /> : <MessageAnnouncementCard {...a0} />;
|
|
});
|
|
export default function GameProfileAnnouncements(props) {
|
|
let callback;
|
|
const { gameId, invite, closeModal, trackAction, scrollOffsetRef } = props;
|
|
callback = void 0;
|
|
const styles2 = useStyles();
|
|
const analyticsLocations = useAnalyticsLocations().analyticsLocations;
|
|
const gameAnnouncements = useGameAnnouncements(gameId, 10);
|
|
const { messages, channelId, guildId, loading } = gameAnnouncements;
|
|
const callback2 = useCallback(() => {
|
|
let guildId2 = invite == null ? void 0 : invite.guild?.id;
|
|
if (guildId2 == null) {
|
|
guildId2 = guildId;
|
|
}
|
|
if (guildId2 != null && channelId != null) {
|
|
trackAction(GameProfileTrackActionActions.Announcements);
|
|
GameProfileActionCreators_native.setGameProfilePendingReturn({
|
|
gameId,
|
|
channelId,
|
|
initialScrollOffset: scrollOffsetRef.current
|
|
});
|
|
closeModal();
|
|
navigateToGameAnnouncement({
|
|
invite,
|
|
guildId: guildId2,
|
|
channelId,
|
|
analyticsLocationStack: analyticsLocations
|
|
});
|
|
}
|
|
}, [trackAction, closeModal, invite, guildId, channelId, analyticsLocations, gameId, scrollOffsetRef]);
|
|
callback = useCallback((a0) => {
|
|
let guildId2 = invite == null ? void 0 : invite.guild?.id;
|
|
if (guildId2 == null) {
|
|
guildId2 = guildId;
|
|
}
|
|
if (guildId2 != null && channelId != null) {
|
|
trackAction(GameProfileTrackActionActions.AnnouncementsItem);
|
|
GameProfileActionCreators_native.setGameProfilePendingReturn({
|
|
gameId,
|
|
channelId,
|
|
initialScrollOffset: scrollOffsetRef.current
|
|
});
|
|
closeModal();
|
|
navigateToGameAnnouncement({
|
|
invite,
|
|
guildId: guildId2,
|
|
channelId,
|
|
messageId: a0,
|
|
analyticsLocationStack: analyticsLocations
|
|
});
|
|
}
|
|
}, [trackAction, closeModal, invite, guildId, channelId, analyticsLocations, gameId, scrollOffsetRef]);
|
|
return loading ? <View style={styles2.container}>
|
|
<View style={styles2.sectionHeader}>
|
|
<Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
|
|
{intl.string(t.B0BV3Y)}
|
|
</Text>
|
|
</View>
|
|
<View style={styles2.loadingContainer}>
|
|
<ActivityIndicator />
|
|
</View>
|
|
</View> : channelId == null ? null : messages.length !== 0 ? <View style={styles2.container}>
|
|
<View style={styles2.sectionHeader}>
|
|
<Text variant="heading-sm/semibold" color="mobile-text-heading-primary">
|
|
{intl.string(t.B0BV3Y)}
|
|
</Text>
|
|
<Button text={intl.string(t.budhsM)} variant="tertiary" size="sm" icon={<ChevronSmallRightIcon size="sm" />} iconPosition="end" onPress={callback2} />
|
|
</View>
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles2.smallCardsScroller} contentContainerStyle={styles2.smallCardsContainer} decelerationRate="fast" snapToInterval={172} snapToStart={false} snapToEnd={false}>
|
|
{messages.map((a0) => <Component key={a0.id} message={a0} onPress={callback} guildId={guildId} channelId={channelId} />)}
|
|
</ScrollView>
|
|
</View> : null;
|
|
};
|