104 lines
4.4 KiB
TypeScript
104 lines
4.4 KiB
TypeScript
// Metro module 15109 (f15110).
|
|
import { memo } from "react";
|
|
import { View } from "react-native";
|
|
import GuildMemberStore from "../../../stores/GuildMemberStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { makeSizeStyle } from "../../main_tabs_v2/native/shared_components/guild_channels/layouts/ChannelListLayout";
|
|
import useIsUsingClientTheme from "../../client_themes/native/useIsUsingClientTheme";
|
|
import { useStateFromStoresObject } from "../../../_bundle/Module589";
|
|
import VoiceUser from "./VoiceUser";
|
|
import { scaleTextLineHeight } from "../../screen/native/useScaledTextLineHeight.android";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { HeadphonesIcon } from "../../../design/components/Icon/native/redesign/generated/HeadphonesIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import VoiceUsersItem from "./VoiceUsersItem";
|
|
let variant, useStyles, Component;
|
|
const AudienceItem = function AudienceItem(props) {
|
|
const { audienceCount, collapsed: collapsed2 } = props;
|
|
const styles = useStyles(useIsUsingClientTheme());
|
|
return <View style={collapsed2 ? styles.listenersCollapsed : styles.listeners}>
|
|
<View style={styles.listenersIconWrapper}>
|
|
<HeadphonesIcon color="redesign-channel-name-muted-text" size="custom" style={styles.headphonesIcon} />
|
|
</View>
|
|
<Text style={styles.listenersText} variant={variant} color="redesign-channel-name-muted-text">
|
|
{collapsed2 ? audienceCount : intl.formatToPlainString(t["+v2pN2"], {
|
|
count: audienceCount
|
|
})}
|
|
</Text>
|
|
</View>;
|
|
};
|
|
variant = "text-sm/medium";
|
|
useStyles = createStyles((a0) => {
|
|
const backgroundColor = a0 ? Module712.colors.MOBILE_EXPRESSION_PICKER_BACKGROUND_DEFAULT : Module712.colors.BACKGROUND_BASE_LOWEST;
|
|
const round = Module712.radii.round;
|
|
return {
|
|
listeners: {
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
padding: 4,
|
|
marginTop: 4,
|
|
marginLeft: -8
|
|
},
|
|
listenersCollapsed: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor,
|
|
borderRadius: round,
|
|
marginLeft: -16,
|
|
marginTop: 4,
|
|
paddingLeft: 2,
|
|
paddingRight: 6
|
|
},
|
|
listenersIconWrapper: {
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor,
|
|
marginRight: 8,
|
|
marginLeft: 4,
|
|
borderRadius: round,
|
|
...makeSizeStyle(20)
|
|
},
|
|
listenersText: {
|
|
marginRight: 4
|
|
},
|
|
userCollapsedOverlap: {
|
|
marginLeft: -20
|
|
},
|
|
headphonesIcon: makeSizeStyle(14)
|
|
};
|
|
});
|
|
Component = memo(function(a0) {
|
|
const voiceState = a0.voiceState;
|
|
const user = voiceState.user;
|
|
let member = voiceState.member;
|
|
const voiceState2 = voiceState.voiceState;
|
|
const { channel, collapsed: collapsed2, isFirst } = a0;
|
|
const styles = useStyles(useIsUsingClientTheme());
|
|
const stateFromStoresObject = useStateFromStoresObject([GuildMemberStore], () => ({
|
|
storeMember: GuildMemberStore.getMember(channel.guild_id, user.id),
|
|
isGuest: GuildMemberStore.isGuestOrLurker(channel.guild_id, user.id)
|
|
}), [channel.guild_id, user.id]);
|
|
const { storeMember, isGuest } = stateFromStoresObject;
|
|
const style = collapsed2 ? isFirst ? null : styles.userCollapsedOverlap : null;
|
|
if (member == null) {
|
|
member = storeMember;
|
|
}
|
|
return <View style={style}>
|
|
<VoiceUser key={user.id} user={user} member={member} mute={voiceState2.mute} deaf={voiceState2.deaf} selfVideo={voiceState2.selfVideo} selfMute={voiceState2.selfMute} selfDeaf={voiceState2.selfDeaf} suppress={voiceState2.suppress} collapsed={collapsed2} sessionId={voiceState2.sessionId} channel={channel} isGuest={isGuest} />
|
|
</View>;
|
|
});
|
|
export default function VoiceUsers(props) {
|
|
const { collapsed, channel: channel2, voiceStates, audienceCount } = props;
|
|
return voiceStates.length !== 0 ? <VoiceUsersItem collapsed={collapsed}>
|
|
{voiceStates.map(function(a0, index) {
|
|
return <Component key={`voice-user-item-${a0.user.id}-${a0.voiceState.sessionId}`} voiceState={a0} channel={channel2} collapsed={collapsed} isFirst={index === 0} />;
|
|
})}
|
|
{audienceCount != null && audienceCount > 0 && <AudienceItem audienceCount={audienceCount} collapsed={collapsed} />}
|
|
</VoiceUsersItem> : null;
|
|
};
|
|
export function getAudienceItemHeight(a0) {
|
|
return 8 + Math.max(20, scaleTextLineHeight(variant, a0));
|
|
}
|