110 lines
5.3 KiB
TypeScript
110 lines
5.3 KiB
TypeScript
// Metro module 12017 (f12018).
|
|
import { View } from "react-native";
|
|
import PermissionStore from "../../../stores/PermissionStore";
|
|
import { Permissions } from "../../../_bundle/Module505";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import { isAndroid } from "../../../utils/PlatformUtils";
|
|
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
|
|
import { useUserProfileAnalyticsContext } from "../UserProfileAnalyticsContext";
|
|
import { useIsScreenReaderEnabled } from "../../a11y/native/useIsScreenReaderEnabled.native";
|
|
import usePersonalizedVoiceChannelUsers from "../hooks/usePersonalizedVoiceChannelUsers";
|
|
import useChannelName from "../../channel/useChannelName";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import { StageIcon } from "../../../design/components/Icon/native/redesign/generated/StageIcon";
|
|
import { VoiceNormalIcon } from "../../../design/components/Icon/native/redesign/generated/VoiceNormalIcon";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import GuildIcon, { GuildIconSizes } from "../../guild/native/GuildIcon";
|
|
import { PressableOpacity } from "../../../design/void/Pressables/native/Pressables";
|
|
import ToastActionCreators from "../../toast/native/ToastActionCreators";
|
|
import { ChevronSmallRightIcon } from "../../../design/components/Icon/native/redesign/generated/ChevronSmallRightIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import getChannelA11yLabel from "../../channel/getChannelA11yLabel";
|
|
import { openGuildVoiceModal } from "../../../utils/native/PrivateChannelCallUtils";
|
|
import ActionSheetActionCreators from "../../action_sheet/native/ActionSheetActionCreators";
|
|
import showUserProfileActionSheet from "./showUserProfileActionSheet";
|
|
import { AvatarPile } from "../../../design/components/Pile/native/AvatarPile.native";
|
|
import { AvatarSizes, Avatar } from "../../../design/void/native";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 4,
|
|
overflow: "hidden"
|
|
},
|
|
channelButton: {
|
|
flex: 1,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 2
|
|
},
|
|
channelName: {
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
marginTop: isAndroid() ? -2 : -1
|
|
}
|
|
});
|
|
export default function UserProfileActivityVoiceChannel(props) {
|
|
const { guild, channel, onAction, style } = props;
|
|
const styles = useStyles();
|
|
const newestAnalyticsLocation = useAnalyticsLocations().newestAnalyticsLocation;
|
|
const context = useUserProfileAnalyticsContext().context;
|
|
const isScreenReaderEnabled = useIsScreenReaderEnabled();
|
|
const users = usePersonalizedVoiceChannelUsers(channel);
|
|
const channelName = useChannelName(channel);
|
|
const stateFromStores = useStateFromStores([PermissionStore], () => channel.isPrivate() || PermissionStore.can(Permissions.CONNECT, channel));
|
|
const Component = channel.isGuildStageVoice() ? StageIcon : VoiceNormalIcon;
|
|
return <View style={[styles.container, style]}>
|
|
{isScreenReaderEnabled ? <View accessible accessibilityLabel={intl.formatToPlainString(t.xm6W9D, {
|
|
guildName: guild.name
|
|
})}>
|
|
<GuildIcon size={GuildIconSizes.XXSMALL} guild={guild} />
|
|
</View> : <PressableOpacity accessibilityRole="button" accessibilityLabel={guild.name} onPress={function onPress() {
|
|
onAction({
|
|
action: "PRESS_VOICE_CHANNEL_ICON"
|
|
});
|
|
ToastActionCreators.open({
|
|
key: "GUILD_NAME_TOAST",
|
|
content: guild.name,
|
|
icon: () => <GuildIcon size={GuildIconSizes.XSMALL} guild={guild} />
|
|
});
|
|
}}>
|
|
<GuildIcon size={GuildIconSizes.XXSMALL} guild={guild} />
|
|
</PressableOpacity>}
|
|
<ChevronSmallRightIcon size="xxs" color="text-default" />
|
|
{stateFromStores ? <PressableOpacity style={styles.channelButton} accessibilityRole="button" accessibilityLabel={getChannelA11yLabel({
|
|
channel
|
|
})} accessibilityHint={intl.string(t["9C444m"])} onPress={function onPress() {
|
|
onAction({
|
|
action: "OPEN_VOICE_CHANNEL"
|
|
});
|
|
openGuildVoiceModal(channel, newestAnalyticsLocation);
|
|
ActionSheetActionCreators.hideActionSheet();
|
|
}}>
|
|
<Component size="xxs" color="text-default" />
|
|
<Text style={styles.channelName} variant="text-xs/normal" lineClamp={1}>{channelName}</Text>
|
|
</PressableOpacity> : <View style={styles.channelButton}>
|
|
<Component size="xxs" color="text-default" />
|
|
<Text style={styles.channelName} variant="text-xs/normal" lineClamp={1}>{channelName}</Text>
|
|
</View>}
|
|
<PressableOpacity accessibilityRole="button" accessibilityLabel={intl.formatToPlainString(t.e95u3C, {
|
|
count: users.length
|
|
})} onPress={function onPress() {
|
|
onAction({
|
|
action: "PRESS_VOICE_CHANNEL_AVATARS"
|
|
});
|
|
ActionSheetActionCreators.openLazy(import("./UserProfileActivityVoiceChannelUsers"), "UserProfileActivityVoiceChannelUsers", {
|
|
users,
|
|
channel,
|
|
onPressUser: (a0) => showUserProfileActionSheet({
|
|
...context,
|
|
userId: a0
|
|
})
|
|
}, "stack");
|
|
}}>
|
|
<AvatarPile size={AvatarSizes.SIZE_16} totalCount={users.length} names={users.map((user) => user.username)}>
|
|
{(users.length <= 3 ? users : users.slice(0, 3)).map((item) => <Avatar key={item.id} size={AvatarSizes.SIZE_16} channel={channel} guildId={guild.id} user={item} />)}
|
|
</AvatarPile>
|
|
</PressableOpacity>
|
|
</View>;
|
|
};
|