225 lines
8.4 KiB
TypeScript
225 lines
8.4 KiB
TypeScript
// Metro module 15422 (f15423).
|
|
import * as Module19 from "react";
|
|
import { useEffect, useMemo } from "react";
|
|
import { Image as Image2, View } from "react-native";
|
|
import GuildPopoutStore from "../../../guild_profile/GuildPopoutStore";
|
|
import GuildStore from "../../../../stores/GuildStore";
|
|
import { GUILD_FEED_CARD_MARGIN_HORIZONTAL, GUILD_FEED_MIN_BANNER_HEIGHT } from "../GuildFeedConstants";
|
|
import { GuildFeatures } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import useTheme from "../../../../hooks/useTheme";
|
|
import { fetchGuildForPopout } from "../../../guild_profile/GuildPopoutActionCreators";
|
|
import { isAndroid } from "../../../../utils/PlatformUtils";
|
|
import AvatarUtils from "../../../../utils/AvatarUtils";
|
|
import { getGuildBadgeSource } from "../../../guild/native/GuildBadge";
|
|
import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
|
|
import { timingSlow } from "../../../../design/animation/reanimated/timing/timingPresets";
|
|
import { useStateFromStoresObject, useStateFromStores } from "../../../../_bundle/Module589";
|
|
import useIsWindowLarge from "../../../screen/native/useIsWindowLarge";
|
|
import { useDrawerWidth } from "../../../screen/native/drawer/useDrawerWidth";
|
|
import { isThemeDark } from "../../../../design/shared";
|
|
import Module15424 from "../../../../_bundle/Module15424";
|
|
import Module15425 from "../../../../_bundle/Module15425";
|
|
import GuildIcon, { GuildIconSizes } from "../../../guild/native/GuildIcon";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { Icon } from "../../../../design/void/native";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import ToastActionCreators from "../../../toast/native/ToastActionCreators";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import Module15426 from "../../../../_bundle/Module15426";
|
|
let useStyles, __initData;
|
|
const GuildFeedBanner = function GuildFeedBanner(props) {
|
|
let c21984_2, width, height, drawerWidth;
|
|
const guild = props.guild;
|
|
let description = props.description;
|
|
const { hideDescription, hideMemberCount } = props;
|
|
c21984_2 = void 0;
|
|
width = void 0;
|
|
height = void 0;
|
|
drawerWidth = void 0;
|
|
const styles = useStyles();
|
|
const sharedValue = useSharedValue(0);
|
|
const G = () => ({
|
|
opacity: sharedValue.get()
|
|
});
|
|
G.__closure = {
|
|
opacity: sharedValue
|
|
};
|
|
G.__workletHash = 10872399645496;
|
|
G.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(G);
|
|
const height2 = Math.max(0.22 * useWindowDimensions_native().height, GUILD_FEED_MIN_BANNER_HEIGHT);
|
|
const theme = useTheme();
|
|
useEffect(() => {
|
|
fetchGuildForPopout(guild.id);
|
|
}, [guild]);
|
|
const memo = useMemo(() => {
|
|
const r8 = guild.features.has(GuildFeatures.ANIMATED_BANNER) && !isAndroid();
|
|
const r20 = guild.banner != null ? AvatarUtils.getGuildBannerSource({
|
|
id: guild.id,
|
|
banner: guild.banner
|
|
}, r8) : null;
|
|
return guild != null ? guild.homeHeader != null ? AvatarUtils.getGuildHomeHeaderSource({
|
|
id: guild.id,
|
|
homeHeader: guild.homeHeader
|
|
}) : r20 : r20;
|
|
}, [guild]);
|
|
const name = guild.name;
|
|
if (description == null) {
|
|
description = guild.description;
|
|
}
|
|
if (hideDescription) {
|
|
description = void 0;
|
|
}
|
|
const handleLoad = function handleLoad() {
|
|
sharedValue.set(withTiming(1, timingSlow));
|
|
};
|
|
const guildBadgeSource = getGuildBadgeSource(guild);
|
|
const discoverableGuild = useStateFromStoresObject([GuildPopoutStore], () => ({
|
|
discoverableGuild: GuildPopoutStore.getGuild(guild.id)
|
|
}), [guild]).discoverableGuild;
|
|
const isWindowLarge = useIsWindowLarge();
|
|
c21984_2 = isWindowLarge;
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
width = windowDimensions_native.width;
|
|
height = windowDimensions_native.height;
|
|
drawerWidth = useDrawerWidth();
|
|
const memo2 = useMemo(() => {
|
|
const r8 = Math.min(width, height);
|
|
if (c21984_2) {
|
|
return Math.min(Math.max(width, height) - drawerWidth, r8);
|
|
}
|
|
return r8 - 2 * GUILD_FEED_CARD_MARGIN_HORIZONTAL;
|
|
}, [width, height, isWindowLarge, drawerWidth]);
|
|
const r102 = [<Image2 {...memo != null ? {
|
|
style: [{
|
|
height: height2,
|
|
width: "100%"
|
|
}, animatedStyle],
|
|
source: memo,
|
|
onLoad: handleLoad
|
|
} : {
|
|
style: [{
|
|
height: height2,
|
|
width: "100%"
|
|
}, animatedStyle],
|
|
source: isThemeDark(theme) ? Module15424 : Module15425,
|
|
onLoad: handleLoad
|
|
}} />, ,];
|
|
r102[1] = <View style={[styles.headerContainer, styles.headerBorder]}>
|
|
<View style={[styles.content, {
|
|
width: memo2,
|
|
marginTop: -32
|
|
}]}>
|
|
<View style={styles.guildIconContainer}>
|
|
<GuildIcon style={styles.avatar} guild={guild} size={GuildIconSizes.XLARGE} animate />
|
|
</View>
|
|
<View style={styles.textContainer}>
|
|
<Text lineClamp={1} variant="heading-xl/extrabold" color="mobile-text-heading-primary" style={styles.title}>{name}</Text>
|
|
{guildBadgeSource != null ? <Icon style={styles.icon} source={guildBadgeSource} disableColor /> : null}
|
|
</View>
|
|
{description != null ? <Text style={styles.description} variant="text-sm/medium" color="text-default">{description}</Text> : null}
|
|
{discoverableGuild != null && !hideMemberCount && <View style={styles.memberInfo}>
|
|
{discoverableGuild.features.has(GuildFeatures.DISCOVERABLE) ? <PressableOpacity style={styles.publicInfo} accessibilityRole="button" onPress={() => {
|
|
ToastActionCreators.open({
|
|
key: "DISCOVERABLE_GUILD_HEADER_PUBLIC_INFO",
|
|
content: intl.string(t.O8lDI2)
|
|
});
|
|
}}>
|
|
<Icon style={styles.publicIcon} source={Module15426} />
|
|
<Text variant="text-xs/medium" color="text-default">
|
|
{intl.string(t["B/vjCu"])}
|
|
</Text>
|
|
</PressableOpacity> : null}
|
|
{discoverableGuild.presenceCount != null ? discoverableGuild.memberCount != null ? <>
|
|
<View style={styles.dotOnline} />
|
|
<Text variant="text-xs/medium" color="text-default">
|
|
{intl.format(t.QCNv6P, {
|
|
online: discoverableGuild.presenceCount,
|
|
offline: discoverableGuild.memberCount
|
|
})}
|
|
</Text>
|
|
</> : null : null}
|
|
</View>}
|
|
</View>
|
|
</View>;
|
|
return <View style={styles.container}>{r102}</View>;
|
|
};
|
|
useStyles = createStyles({
|
|
avatar: {
|
|
borderRadius: Module712.radii.lg,
|
|
height: 64,
|
|
width: 64
|
|
},
|
|
container: {
|
|
paddingBottom: 24,
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
description: {
|
|
marginTop: 4
|
|
},
|
|
textContainer: {
|
|
marginTop: GUILD_FEED_CARD_MARGIN_HORIZONTAL,
|
|
alignItems: "center",
|
|
flexDirection: "row"
|
|
},
|
|
content: {
|
|
width: "100%"
|
|
},
|
|
icon: {
|
|
marginLeft: 8
|
|
},
|
|
headerContainer: {
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
headerBorder: {
|
|
borderTopRightRadius: Module712.radii.lg,
|
|
borderTopLeftRadius: Module712.radii.lg,
|
|
marginTop: -16
|
|
},
|
|
guildIconContainer: {
|
|
padding: 4,
|
|
borderRadius: Module712.radii.lg,
|
|
alignSelf: "flex-start",
|
|
backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
|
|
},
|
|
dotOnline: {
|
|
width: 4,
|
|
height: 4,
|
|
borderRadius: Module712.radii.xs,
|
|
marginRight: 4,
|
|
backgroundColor: Module712.unsafe_rawColors.GREEN_360
|
|
},
|
|
publicInfo: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginRight: 12
|
|
},
|
|
publicIcon: {
|
|
marginRight: 4,
|
|
width: 14,
|
|
height: 14
|
|
},
|
|
memberInfo: {
|
|
marginTop: 4,
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
title: {
|
|
maxWidth: "90%"
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function GuildFeedBannerTsx1(){const{opacity}=this.__closure;return{opacity:opacity.get()};}"
|
|
};
|
|
const r93 = Module19.memo(function GuildFeedBannerContainer(props) {
|
|
const { guildId, description, hideDescription, hideMemberCount } = props;
|
|
const stateFromStores = useStateFromStores([GuildStore], () => GuildStore.getGuild(guildId));
|
|
return stateFromStores != null ? <GuildFeedBanner guild={stateFromStores} description={description} hideDescription={hideDescription} hideMemberCount={hideMemberCount} /> : null;
|
|
});
|
|
export default r93;
|