200 lines
9.2 KiB
TypeScript
200 lines
9.2 KiB
TypeScript
// Metro module 10570 (f10571).
|
|
import _slicedToArray from "../../../../_bundle/_slicedToArray";
|
|
import { memo, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import VoiceChannelEffectsStore, { clearVoiceChannelEffectForUser } from "../../../voice_channel_effects/VoiceChannelEffectsStore";
|
|
import AuthenticationStore from "../../../../stores/AuthenticationStore";
|
|
import ChannelStore from "../../../../stores/ChannelStore";
|
|
import MediaEngineStore from "../../../../stores/MediaEngineStore";
|
|
import { VideoToggleState } from "../../../../Constants";
|
|
import { ParticipantTypes } from "../../../calls/CallConstants";
|
|
import { MediaEngineContextTypes } from "../../../../_bundle/Module4250";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { hexWithOpacity } from "../../../../utils/ColorUtils";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
|
|
import VideoBackground from "../../../calls/native/VideoBackground";
|
|
import { Icon } from "../../../../design/void/native";
|
|
import Module8346 from "../../../../_bundle/Module8346";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import VideoRenderer, { ResizeMode } from "./VideoRenderer";
|
|
import { VideoSpinnerContext } from "../../../../lib/VideoSpinnerTimer";
|
|
import Module7671 from "../../../../_bundle/Module7671";
|
|
import Module10596 from "../../../../_bundle/Module10596";
|
|
import Module10597 from "../../../../_bundle/Module10597";
|
|
import Module10598 from "../../../../_bundle/Module10598";
|
|
import useIsSpeaking from "../../../../hooks/useIsSpeaking";
|
|
import participantHasVideo from "../../participantHasVideo";
|
|
import mediaEngineContextFromParticipantType from "../../../calls/mediaEngineContextFromParticipantType";
|
|
import { useVoiceChatNavigationContext } from "../../../voice_chat/native/VoiceChatModalContext";
|
|
import useParticipantTileTapGesture from "../useParticipantTileTapGesture";
|
|
import { Gesture, GestureDetector } from "../../../../_bundle/Module5273";
|
|
import AnimatedEffectEmoji from "../../../voice_channel_effects/native/AnimatedEffectEmoji";
|
|
let Component2;
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flex: 1,
|
|
width: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
overflow: "hidden",
|
|
backgroundColor: Module712.colors.BLACK
|
|
},
|
|
imageBackground: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
alignSelf: "stretch"
|
|
},
|
|
autoDisabledVideoWrapper: {
|
|
width: "100%",
|
|
flexDirection: "row",
|
|
justifyContent: "center"
|
|
},
|
|
autoDisabledVideo: {
|
|
backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_700, 0.5),
|
|
alignItems: "center",
|
|
height: 24
|
|
},
|
|
autoDisabledVideoTextWrapper: {
|
|
borderRadius: Module712.radii.sm,
|
|
flexDirection: "row",
|
|
justifyContent: "space-evenly",
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 4,
|
|
alignItems: "center"
|
|
},
|
|
statusWrapper: {
|
|
position: "absolute",
|
|
bottom: 8,
|
|
right: 8,
|
|
backgroundColor: hexWithOpacity(Module712.unsafe_rawColors.PRIMARY_700, 0.5),
|
|
borderRadius: Module712.radii.md,
|
|
width: 24,
|
|
height: 24,
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
labelText: {
|
|
marginLeft: 8,
|
|
height: 20,
|
|
alignItems: "center"
|
|
}
|
|
});
|
|
let Component = memo(function({ streamId, user: user2, resizeMode, ringing, avatarSize, speaking, gestureEnabled, hasVideo, guildId }) {
|
|
let c18134_3, c18134_4;
|
|
c18134_3 = void 0;
|
|
c18134_4 = void 0;
|
|
const styles = useStyles();
|
|
const id = user2.id;
|
|
const stateFromStores = useStateFromStores([AuthenticationStore], () => {
|
|
let r1 = hasVideo;
|
|
if (hasVideo) {
|
|
r1 = id === AuthenticationStore.getId();
|
|
}
|
|
return r1;
|
|
}, [hasVideo, id]);
|
|
c18134_3 = _slicedToArray(useStateFromStoresArray([MediaEngineStore], () => [MediaEngineStore.isLocalVideoAutoDisabled(id)], [id]), 1)[0];
|
|
const r2 = useStateFromStores([MediaEngineStore], () => id != null ? MediaEngineStore.getVideoToggleState(id, MediaEngineContextTypes.DEFAULT) : VideoToggleState.NONE, [id]) === VideoToggleState.AUTO_PROBING;
|
|
c18134_4 = r2;
|
|
return !ringing && (hasVideo && !r2) ? <VideoRenderer resizeMode={resizeMode} streamId={streamId} gestureEnabled={gestureEnabled} videoSpinnerContext={stateFromStores ? VideoSpinnerContext.SELF_VIDEO : VideoSpinnerContext.REMOTE_VIDEO} userId={user2.id} /> : <VideoBackground style={styles.imageBackground} url={user2.getAvatarURL(guildId, 128)} user={user2} guildId={guildId} speaking={speaking} size={avatarSize} renderVideoDetails={function renderVideoDetails() {
|
|
return c18134_3 ? <View style={styles.autoDisabledVideoWrapper}>
|
|
<View style={[styles.autoDisabledVideo, styles.autoDisabledVideoTextWrapper]}>
|
|
<Icon source={Module8346} size={Icon.Sizes.SMALL} disableColor />
|
|
<Text variant="text-sm/normal" color="text-default" style={styles.labelText}>
|
|
{intl.string(t.m2Hyj0)}
|
|
</Text>
|
|
</View>
|
|
</View> : c18134_4 ? <View style={styles.autoDisabledVideoWrapper}>
|
|
<View style={[styles.autoDisabledVideo, styles.autoDisabledVideoTextWrapper]}>
|
|
<Icon source={Module8346} size={Icon.Sizes.SMALL} disableColor />
|
|
<Text variant="text-sm/normal" color="text-default" style={styles.labelText}>
|
|
{intl.string(t.m2Hyj0)}
|
|
</Text>
|
|
</View>
|
|
</View> : null;
|
|
}} />;
|
|
});
|
|
Component2 = memo(function({ muted, deafened, userId, style }) {
|
|
let r39;
|
|
const styles2 = useStyles();
|
|
let [r30, r31, r32] = useStateFromStoresArray([MediaEngineStore], () => [MediaEngineStore.isLocalMute(userId), MediaEngineStore.isLocalVideoDisabled(userId), MediaEngineStore.isLocalVideoAutoDisabled(userId)], [userId]);
|
|
const source = r30 ? Module7671 : deafened ? Module10596 : muted ? Module10597 : void 0;
|
|
if (r31) {
|
|
r31 = !r32;
|
|
}
|
|
L17: {
|
|
if (!r31) {
|
|
r39 = null;
|
|
if (source == null) {
|
|
break L17;
|
|
}
|
|
}
|
|
r39 = <>
|
|
{[r31 ? <View style={[styles2.statusWrapper, style]}>
|
|
<Icon source={Module10598} size={Icon.Sizes.SMALL} disableColor />
|
|
</View> : null, source != null ? <View style={[styles2.statusWrapper, style, r31 ? {
|
|
right: 38
|
|
} : null]}>
|
|
<Icon source={source} size={Icon.Sizes.SMALL} color={Module712.unsafe_rawColors.WHITE} disableColor={source === Module7671} />
|
|
</View> : null]}
|
|
</>;
|
|
}
|
|
return r39;
|
|
});
|
|
export default function UserTile(props) {
|
|
let user, id2;
|
|
const { participant, onSingleTap, onDoubleTap, onLongPress, avatarSize, resizeMode = ResizeMode.COVER, statusStyle, gestureEnabled, hasNotch, style } = props;
|
|
user = void 0;
|
|
id2 = void 0;
|
|
const styles2 = useStyles();
|
|
const callback2 = useCallback(() => onSingleTap == null ? void 0 : onSingleTap(participant), [onSingleTap, participant]);
|
|
const callback = useCallback(() => onDoubleTap == null ? void 0 : onDoubleTap(participant), [onDoubleTap, participant]);
|
|
const callback3 = useCallback(() => onLongPress == null ? void 0 : onLongPress(participant), [participant, onLongPress]);
|
|
const { streamId, ringing } = participant;
|
|
user = participant.user;
|
|
const voiceState = participant.voiceState;
|
|
const isSpeaking = useIsSpeaking({
|
|
userId: participant.id
|
|
});
|
|
let guildId = ChannelStore.getChannel(voiceState?.channelId)?.guild_id;
|
|
if (guildId == null) {
|
|
guildId = void 0;
|
|
}
|
|
let hasVideo2 = participantHasVideo(participant);
|
|
let muted = voiceState == null ? void 0 : voiceState.isVoiceMuted();
|
|
if (muted == null) {
|
|
muted = false;
|
|
}
|
|
let deafened = voiceState == null ? void 0 : voiceState.isVoiceDeafened();
|
|
if (deafened == null) {
|
|
deafened = false;
|
|
}
|
|
const stateFromStores = useStateFromStores([MediaEngineStore], () => user.id != null && MediaEngineStore.isLocalVideoDisabled(user.id, mediaEngineContextFromParticipantType(participant.type)), [user.id, participant.type]);
|
|
const swipeDismissRef = useVoiceChatNavigationContext()?.swipeDismissRef;
|
|
id2 = participant.user?.id;
|
|
const stateFromStores2 = useStateFromStores([VoiceChannelEffectsStore], () => id2 != null ? VoiceChannelEffectsStore.getEffectForUserId(id2) : null);
|
|
if (participant.type !== ParticipantTypes.USER) {
|
|
participant.type;
|
|
}
|
|
const participantTileTapGesture = useParticipantTileTapGesture({
|
|
onDoubleTapStart: callback,
|
|
onSingleTapStart: callback2
|
|
});
|
|
const r106 = Gesture.LongPress().onStart(callback3).minDuration(800);
|
|
const props2 = {
|
|
gesture: Gesture.Simultaneous(swipeDismissRef != null ? r106.requireExternalGestureToFail(swipeDismissRef) : r106, participantTileTapGesture),
|
|
children: null
|
|
};
|
|
if (hasVideo2) {
|
|
hasVideo2 = !stateFromStores;
|
|
}
|
|
props2.children = <View style={[styles2.container, style]}>
|
|
<Component guildId={guildId} hasVideo={hasVideo2} streamId={streamId} user={user} resizeMode={resizeMode} ringing={ringing} speaking={isSpeaking} avatarSize={avatarSize} gestureEnabled={gestureEnabled} />
|
|
{id2 != null ? stateFromStores2 != null ? <AnimatedEffectEmoji voiceChannelEffect={stateFromStores2} onComplete={() => clearVoiceChannelEffectForUser(id2)} userId={id2} hasNotch={hasNotch} /> : null : null}
|
|
<Component2 muted={muted} deafened={deafened} userId={user.id} style={statusStyle} />
|
|
</View>;
|
|
return <GestureDetector {...props2} />;
|
|
};
|