243 lines
11 KiB
TypeScript
243 lines
11 KiB
TypeScript
// Metro module 10539 (f10540).
|
|
import { memo } from "react";
|
|
import { TouchableOpacity, View } from "react-native";
|
|
import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
|
|
import ChannelRTCStore from "../../../calls/ChannelRTCStore";
|
|
import AuthenticationStore from "../../../../stores/AuthenticationStore";
|
|
import MediaEngineStore from "../../../../stores/MediaEngineStore";
|
|
import SelectedChannelStore from "../../../../stores/SelectedChannelStore";
|
|
import SpeakingStore from "../../../../stores/SpeakingStore";
|
|
import ChannelCallLifecycleStore from "../ChannelCallLifecycleStore";
|
|
import { togglePipFocus, useIsVoiceChatFocused } from "../ChannelCallStore";
|
|
import { ParticipantTypes } from "../../../calls/CallConstants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { generateBoxShadowStyle, EIGHT_DP_ELEVATION_SHADOW_PARAMS, AvatarSizes, Avatar, Icon } from "../../../../design/void/native";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { useVoiceChatNavigationContext } from "../../../voice_chat/native/VoiceChatModalContext";
|
|
import Module12 from "../../../../_bundle/Module12";
|
|
import useIsActivityFocused from "../../../activities/useIsActivityFocused";
|
|
import isWatchTogetherApplication from "../../../activities/utils/isWatchTogetherApplication";
|
|
import { useStateFromStores, useStateFromStoresArray } from "../../../../_bundle/Module589";
|
|
import ChannelRTCActionCreators from "../../../../actions/ChannelRTCActionCreators";
|
|
import ScreenshareTile from "./ScreenshareTile";
|
|
import StreamTile from "./StreamTile";
|
|
import { ResizeMode } from "./VideoRenderer";
|
|
import participantHasVideo from "../../participantHasVideo";
|
|
import UserTile from "./UserTile";
|
|
import ActivityTile from "./ActivityTile";
|
|
import transitionToActivity_native from "../../../activities/utils/transitionToActivity.native";
|
|
import { useLeadingEdgeDebounce } from "../../../../hooks/useLeadingEdgeDebounce";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import useAvatarColor from "../../../avatar/useAvatarColor";
|
|
import Module8346 from "../../../../_bundle/Module8346";
|
|
import { useIsViewingActivity } from "../../../activities/native/useIsViewingActivity";
|
|
import { useShouldForcePipOrientation } from "./useShouldForcePipOrientation";
|
|
import usePipDimensions from "./usePipDimensions";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import { isAndroid } from "../../../../utils/PlatformUtils";
|
|
import { OrientationType } from "../../../device/native/DeviceOrientation";
|
|
let useStyles, Component2, Component;
|
|
const areParticipantsEqual = function areParticipantsEqual(a0, a1) {
|
|
const [, , r6] = a0;
|
|
const [, , r36] = a1;
|
|
return r6 === r36;
|
|
};
|
|
useStyles = createStyles({
|
|
elevationShadow: generateBoxShadowStyle(EIGHT_DP_ELEVATION_SHADOW_PARAMS),
|
|
background: {
|
|
backgroundColor: Module712.colors.BLACK,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
backgroundPipFab: {
|
|
backgroundColor: Module712.colors.BLACK,
|
|
borderRadius: Module712.radii.lg
|
|
},
|
|
pip: {
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
pipFab: {
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden"
|
|
},
|
|
avatarContainer: {
|
|
width: "100%",
|
|
height: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
activityPipContainer: {
|
|
flex: 1,
|
|
width: "100%"
|
|
},
|
|
thermalAlertIconContainer: {
|
|
width: 22,
|
|
height: 22,
|
|
backgroundColor: "rgba(78, 80, 88, 0.48)",
|
|
borderRadius: 11,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
position: "absolute",
|
|
top: 6,
|
|
left: 6
|
|
},
|
|
thermalAlertIcon: {
|
|
width: 14,
|
|
height: 14,
|
|
color: Module712.colors.WHITE
|
|
}
|
|
});
|
|
Component2 = memo(function({ channel, pipParticipant, selfParticipant: selfParticipant2 }) {
|
|
let r50, r85;
|
|
let r21 = useVoiceChatNavigationContext()?.openVoice;
|
|
if (r21 == null) {
|
|
r21 = Module12.noop;
|
|
}
|
|
const noop = r21;
|
|
const isVoiceChatFocused = useIsVoiceChatFocused();
|
|
let c18119_4 = useIsActivityFocused(channel.id);
|
|
const r9 = pipParticipant?.type === ParticipantTypes.ACTIVITY && isWatchTogetherApplication(pipParticipant?.applicationId);
|
|
const stateFromStores = useStateFromStores([MediaEngineStore], () => pipParticipant != null && MediaEngineStore.isLocalVideoDisabled(pipParticipant.id), [pipParticipant]);
|
|
const type = pipParticipant?.type;
|
|
L25: {
|
|
const onPipTap = function onPipTap() {
|
|
if (isVoiceChatFocused) {
|
|
noop();
|
|
}
|
|
if (c18119_4) {
|
|
ChannelRTCActionCreators.selectParticipant(channel.id, null);
|
|
} else {
|
|
togglePipFocus();
|
|
}
|
|
};
|
|
if (ParticipantTypes.HIDDEN_STREAM !== type && ParticipantTypes.STREAM !== type) {
|
|
if (ParticipantTypes.USER === type) {
|
|
r50 = participantHasVideo(pipParticipant) ? stateFromStores ? null : <UserTile participant={pipParticipant} avatarSize={AvatarSizes.PROFILE} resizeMode={ResizeMode.COVER} onSingleTap={onPipTap} onDoubleTap={onPipTap} /> : null;
|
|
break L25;
|
|
}
|
|
const ACTIVITY = ParticipantTypes.ACTIVITY;
|
|
r50 = null;
|
|
if (ACTIVITY !== type) {
|
|
break L25;
|
|
}
|
|
r50 = <ActivityTile participant={pipParticipant} channel={channel} onSingleTap={() => {
|
|
const currentEmbeddedActivity = EmbeddedActivitiesStore.getCurrentEmbeddedActivity();
|
|
if (currentEmbeddedActivity != null) {
|
|
transitionToActivity_native(channel.guild_id, currentEmbeddedActivity.location);
|
|
}
|
|
if (isVoiceChatFocused) {
|
|
noop();
|
|
}
|
|
}} />;
|
|
} else {
|
|
if (pipParticipant.user.id === AuthenticationStore.getId()) {
|
|
const onScreenshareTap = function onScreenshareTap() {
|
|
const voiceChannelId = SelectedChannelStore.getVoiceChannelId();
|
|
if (voiceChannelId != null) {
|
|
let r14 = pipParticipant?.id;
|
|
if (r14 == null) {
|
|
r14 = null;
|
|
}
|
|
ChannelRTCActionCreators.selectParticipant(voiceChannelId, r14);
|
|
if (isVoiceChatFocused) {
|
|
noop();
|
|
}
|
|
}
|
|
};
|
|
r85 = <ScreenshareTile onSingleTap={onScreenshareTap} onDoubleTap={onScreenshareTap} />;
|
|
} else {
|
|
r85 = <StreamTile removeEmptyStateButton removeEmptyStateImage resizeMode={ResizeMode.CONTAIN} participant={pipParticipant} onSingleTap={onPipTap} onDoubleTap={onPipTap} />;
|
|
}
|
|
r50 = r85;
|
|
}
|
|
}
|
|
return <>
|
|
{selfParticipant2 == null ? null : r9 ? null : <UserTile participant={selfParticipant2} avatarSize={AvatarSizes.PROFILE} resizeMode={ResizeMode.COVER} onSingleTap={() => {
|
|
if (isVoiceChatFocused) {
|
|
noop();
|
|
} else {
|
|
togglePipFocus();
|
|
}
|
|
}} />}
|
|
{r50}
|
|
</>;
|
|
});
|
|
Component = memo(function(a0) {
|
|
let r31, r32, channel2, participant, styles;
|
|
let id, selfParticipant, leadingEdgeDebounce;
|
|
L9: {
|
|
channel2 = a0.channel;
|
|
const selfParticipant2 = a0.selfParticipant;
|
|
styles = useStyles();
|
|
[r31, r32] = useStateFromStoresArray([ChannelCallLifecycleStore], () => [ChannelCallLifecycleStore.consumedRequestToRespondToSeriousThermalState(), ChannelCallLifecycleStore.isReactingToThermalState()]);
|
|
id = channel2.id;
|
|
selfParticipant = selfParticipant2;
|
|
leadingEdgeDebounce = void 0;
|
|
const stateFromStores = useStateFromStores([ChannelCallLifecycleStore], () => ChannelCallLifecycleStore.isReactingToThermalState());
|
|
const [r44, r45] = useStateFromStores([ChannelRTCStore], () => [ChannelRTCStore.getParticipants(id), ChannelRTCStore.getVideoParticipants(id), ChannelRTCStore.getParticipantsVersion(id)], [id], areParticipantsEqual);
|
|
leadingEdgeDebounce = useLeadingEdgeDebounce(useStateFromStores([SpeakingStore], () => selfParticipant != null ? SpeakingStore.getSpeakers().find((item) => item !== selfParticipant.user.id && SpeakingStore.isSpeaking(item)) : null, [selfParticipant]), 1000);
|
|
if (leadingEdgeDebounce != null) {
|
|
const r61 = r44.find((item) => item.id === leadingEdgeDebounce);
|
|
if (r61 != null) {
|
|
const type = r61.type;
|
|
const USER = ParticipantTypes.USER;
|
|
participant = r61;
|
|
if (type === USER) {
|
|
break L9;
|
|
}
|
|
}
|
|
}
|
|
const streamId = selfParticipant?.streamId;
|
|
participant = selfParticipant;
|
|
if (streamId == null) {
|
|
participant = selfParticipant;
|
|
if (!stateFromStores) {
|
|
const r75 = [...r45].sort((a, b) => a.lastSpoke < b.lastSpoke ? 1 : -1)[0];
|
|
participant = r75 ?? selfParticipant;
|
|
}
|
|
}
|
|
}
|
|
const token = useToken(Module712.unsafe_rawColors.PRIMARY_800);
|
|
const avatarColor = useAvatarColor(participant == null ? void 0 : participant.user.getAvatarURL(channel2.guild_id, 80), token);
|
|
if (participant == null) {
|
|
return null;
|
|
}
|
|
return <View style={[styles.avatarContainer, {
|
|
backgroundColor: avatarColor
|
|
}]}>
|
|
{participant.streamId != null && participant.voiceState?.selfVideo && !r32 ? <UserTile participant={participant} avatarSize={AvatarSizes.PROFILE} resizeMode={ResizeMode.COVER} /> : <Avatar size={AvatarSizes.LARGE_48} channel={channel2} guildId={channel2.guild_id} user={participant.user} speaking={participant.speaking} />}
|
|
{r31 ? <View style={styles.thermalAlertIconContainer}>
|
|
<Icon style={styles.thermalAlertIcon} source={Module8346} color={styles.thermalAlertIcon.color} />
|
|
</View> : null}
|
|
</View>;
|
|
});
|
|
const r104 = memo(function({ channel: channel2, pipParticipant: pipParticipant2, selfParticipant: selfParticipant2 }) {
|
|
const styles = useStyles();
|
|
const isViewingActivity = useIsViewingActivity({
|
|
channelId: channel2.id
|
|
});
|
|
const shouldForcePipOrientation = useShouldForcePipOrientation({
|
|
channel: channel2
|
|
});
|
|
const pipDimensions = usePipDimensions({
|
|
channelId: channel2.id,
|
|
forcedOrientation: shouldForcePipOrientation
|
|
});
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const { width, height } = windowDimensions_native;
|
|
return <View style={isViewingActivity ? styles.backgroundPipFab : styles.background}>
|
|
<TouchableOpacity activeOpacity={0.7}>
|
|
<View style={[isViewingActivity ? styles.pipFab : styles.pip, isAndroid() ? styles.elevationShadow : void 0, {
|
|
flexDirection: width > height ? "row" : shouldForcePipOrientation === OrientationType.LANDSCAPE ? "row" : "column"
|
|
}, pipDimensions]}>
|
|
{isViewingActivity ? <View pointerEvents="none" style={styles.activityPipContainer}>
|
|
<Component channel={channel2} pipParticipant={pipParticipant2} selfParticipant={selfParticipant2} />
|
|
</View> : <Component2 channel={channel2} pipParticipant={pipParticipant2} selfParticipant={selfParticipant2} />}
|
|
</View>
|
|
</TouchableOpacity>
|
|
</View>;
|
|
});
|
|
export default r104;
|
|
export { areParticipantsEqual };
|