627 lines
24 KiB
TypeScript
627 lines
24 KiB
TypeScript
// Metro module 15987 (f15988).
|
|
import * as Module19 from "react";
|
|
import { useContext, useEffect, useMemo, useState, useCallback, useLayoutEffect, useRef } from "react";
|
|
import { StyleSheet, PixelRatio } from "react-native";
|
|
import EmbeddedActivitiesStore from "../../../activities/EmbeddedActivitiesStore";
|
|
import ChannelRTCStore from "../../../calls/ChannelRTCStore";
|
|
import ChannelCallLifecycleStore from "../../../video_calls/native/ChannelCallLifecycleStore";
|
|
import ApplicationStreamingStore from "../../../../stores/ApplicationStreamingStore";
|
|
import AuthenticationStore from "../../../../stores/AuthenticationStore";
|
|
import ChannelStore from "../../../../stores/ChannelStore";
|
|
import UserStore from "../../../../stores/UserStore";
|
|
import { VoicePanelModes } from "../../VoicePanelConstants";
|
|
import { VoicePanelPIPModes } from "./VoicePanelPIPConstants";
|
|
import { ComponentActions, ApplicationStreamStates } from "../../../../Constants";
|
|
import { OrientationLockState, ActivityLayoutMode } from "../../../activities/Constants";
|
|
import { ParticipantTypes, isActivityParticipant } from "../../../calls/CallConstants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import VoicePanelStateContext from "../VoicePanelStateContext";
|
|
import { useSetHasActiveVideoOutputSink } from "../controller/VoicePanelStreamOutputSinkStack";
|
|
import Module10566 from "../../../../_bundle/Module10566";
|
|
import { ComponentDispatch } from "../../../../utils/ComponentDispatchUtils";
|
|
import { TransitionStates, TransitionGroup } from "../../../../design/components/TransitionGroup/TransitionGroup";
|
|
import { usePIPState } from "./VoicePanelPIPStateContext";
|
|
import NativeView from "../../../core/native/NativeView";
|
|
import { getVoicePanelPIPBorderRadius } from "./VoicePanelPIPUtils";
|
|
import { useStateFromStores, useStateFromStoresObject } from "../../../../_bundle/defaultAreStatesEqual";
|
|
import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import { useAnimatedReaction, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import EmbeddedActivityView from "../../../activities/native/EmbeddedActivityView";
|
|
import { useDominantColorFromImage, getCachedSourceFromURI } from "../card/DominantColorUtils";
|
|
import { useSurfaceDirectRendererExperiment } from "../../../video_calls/native/SurfaceDirectRendererExperiment";
|
|
import { useCanRenderParticipantVideo } from "../../../video_calls/participantHasVideo";
|
|
import { Avatar, AvatarSizes, Icon } from "../../../../design/void/native";
|
|
import Module8346 from "../../../../_bundle/Module8346";
|
|
import { useTargetDimensionsSubscription } from "../card/VoicePanelCardLayoutManager";
|
|
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
|
|
import { updateVideoSize } from "../../../media/VideoActionCreators";
|
|
import ExternalPip_android from "../../../external_pip/ExternalPip.android";
|
|
import { StreamEnded } from "../../../../design/components/Illustration/native/redesign/generated/StreamEnded";
|
|
import { StreamFailed } from "../../../../design/components/Illustration/native/redesign/generated/StreamFailed";
|
|
function $mk98403($env) {
|
|
return () => {
|
|
const r7 = $env;
|
|
let env28198 = {
|
|
$parent: $env
|
|
};
|
|
const handleVideoReady = function handleVideoReady() {
|
|
clearTimeout(env28198[0]);
|
|
setTimeout($mk117136(env28198.$parent), 17);
|
|
};
|
|
env28198[1] = handleVideoReady;
|
|
const r9 = r7[0];
|
|
const r3 = $env.$parent;
|
|
const r5 = r3[0];
|
|
const r4 = r3[2];
|
|
if (r9 === r5(r4[22]).TransitionStates.YEETED) {
|
|
env28198[0] = setTimeout($mk112446(r7), 500);
|
|
r5(r4[21]).ComponentDispatch.subscribe(r3[16].VOICE_PANEL_PIP_CONTENT_READY, handleVideoReady);
|
|
return () => {
|
|
const r2 = env28198.$parent.$parent;
|
|
(0, r2[0])(r2[2][21]).ComponentDispatch.unsubscribe(r2[16].VOICE_PANEL_PIP_CONTENT_READY, env28198[1]);
|
|
clearTimeout(env28198[0]);
|
|
};
|
|
}
|
|
};
|
|
}
|
|
function $mk112446($env) {
|
|
return () => {
|
|
const r3 = $env[1];
|
|
return r3 == null ? void 0 : r3();
|
|
};
|
|
}
|
|
function $mk117136($env) {
|
|
return () => {
|
|
const r3 = $env[1];
|
|
return r3 == null ? void 0 : r3();
|
|
};
|
|
}
|
|
let markContentReady, InnerStroke, ActivityInVoice, User, AnimatedVideoWrapper, Stream, getFocusedKey, renderFocusedParticipant, areParticipantsEqual, useStyles, c11456_27, c11456_28, c11456_30, c11456_31, c11456_32, c11456_33, c11456_35, EmptyPIP;
|
|
let env11456 = {};
|
|
const VideoStream = function VideoStream(props) {
|
|
const streamOutputSinkStack = useContext(VoicePanelStateContext).streamOutputSinkStack;
|
|
const streamId = props.streamId;
|
|
const setHasActiveVideoOutputSink = useSetHasActiveVideoOutputSink(streamOutputSinkStack);
|
|
useEffect(() => {
|
|
if (streamId != null) {
|
|
setHasActiveVideoOutputSink(streamId, true);
|
|
return () => {
|
|
setHasActiveVideoOutputSink(streamId, false);
|
|
};
|
|
}
|
|
}, [setHasActiveVideoOutputSink, streamId]);
|
|
return <Module10566 {...props} />;
|
|
};
|
|
markContentReady = function markContentReady() {
|
|
ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
|
|
};
|
|
InnerStroke = function InnerStroke({ style }) {
|
|
const pIPState = usePIPState();
|
|
const { width, height } = pIPState;
|
|
const styles = useStyles();
|
|
let c22686_3 = styles;
|
|
return (0, jsx)(NativeView, {
|
|
style: useMemo(() => [c22686_3.innerStroke, {
|
|
borderRadius: getVoicePanelPIPBorderRadius(width, height) + 1
|
|
}, style], [width, height, styles.innerStroke, style])
|
|
});
|
|
};
|
|
ActivityInVoice = function ActivityInVoice(props) {
|
|
let state, setState, stateFromStores, stateFromStores2, callback, c22687_9;
|
|
let env22688;
|
|
const { participantId, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
|
|
state = void 0;
|
|
setState = void 0;
|
|
stateFromStores = void 0;
|
|
stateFromStores2 = void 0;
|
|
callback = void 0;
|
|
c22687_9 = void 0;
|
|
const styles = useStyles();
|
|
const r22 = env22688 = {
|
|
$parent: env11456
|
|
};
|
|
env22688[0] = transitionState2;
|
|
env22688[1] = transitionCleanUp2;
|
|
useEffect($mk98403(r22), [transitionState2, transitionCleanUp2]);
|
|
const r13 = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
|
|
const context = useContext(VoicePanelStateContext);
|
|
const { channelId, layoutManager, windowDimensions } = context;
|
|
const stateFromStores3 = useStateFromStores([ChannelStore], () => ChannelStore.getChannel(channelId));
|
|
[state, setState] = useState(transitionState2 === TransitionStates.MOUNTED);
|
|
stateFromStores = useStateFromStores([ChannelRTCStore], () => {
|
|
const participant = ChannelRTCStore.getParticipant(channelId, participantId);
|
|
return participant != null ? participant.type === ParticipantTypes.ACTIVITY ? participant.applicationId : participantId : participantId;
|
|
}, [channelId, participantId]);
|
|
stateFromStores2 = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getPipOrientationLockStateForApp(stateFromStores), [stateFromStores]);
|
|
callback = useCallback((a0) => {
|
|
L11: {
|
|
const r3 = a0.width > a0.height;
|
|
if (OrientationLockState.LANDSCAPE === stateFromStores2) {
|
|
layoutManager.setTargetDimensions(stateFromStores, 16, 9);
|
|
} else if (OrientationLockState.PORTRAIT === stateFromStores2) {
|
|
layoutManager.setTargetDimensions(stateFromStores, 9, 16);
|
|
} else {
|
|
if (OrientationLockState.UNLOCKED !== stateFromStores2 && stateFromStores2 !== null) {
|
|
break L11;
|
|
}
|
|
layoutManager.setTargetDimensions(stateFromStores, r3 ? 16 : 9, r3 ? 9 : 16);
|
|
}
|
|
}
|
|
}, [layoutManager, stateFromStores2, stateFromStores]);
|
|
useLayoutEffect(() => {
|
|
const windowDimensions2 = getWindowDimensions();
|
|
callback({
|
|
...windowDimensions2,
|
|
landscape: windowDimensions2.width > windowDimensions2.height
|
|
});
|
|
}, [callback]);
|
|
const r76 = () => windowDimensions.get();
|
|
r76.__closure = {
|
|
windowDimensions
|
|
};
|
|
r76.__workletHash = 20962628184;
|
|
r76.__initData = c11456_27;
|
|
const r80 = function(a0, a1) {
|
|
if (a0 !== a1) {
|
|
_ReanimatedRexport.runOnJS(callback)(a0);
|
|
}
|
|
};
|
|
r80.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
handleTargetAspectRatioParams: callback
|
|
};
|
|
r80.__workletHash = 10001753822389;
|
|
r80.__initData = c11456_28;
|
|
useAnimatedReaction(r76, r80);
|
|
let r88 = null;
|
|
const r89 = stateFromStores3 != null;
|
|
c22687_9 = r89;
|
|
useEffect(() => {
|
|
if (!state && c22687_9) {
|
|
ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
|
|
} else if (state) {
|
|
let c28199_0 = setTimeout(() => {
|
|
setState(false);
|
|
ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
|
|
}, 500);
|
|
return () => {
|
|
clearTimeout(c28199_0);
|
|
};
|
|
}
|
|
}, [r89, state]);
|
|
if (!state) {
|
|
r88 = r89 ? <NativeView style={[styles.activity, r13]}>
|
|
<EmbeddedActivityView channel={stateFromStores3} layoutMode={ActivityLayoutMode.PIP} />
|
|
<InnerStroke />
|
|
</NativeView> : (0, jsx)(User, {
|
|
participantId: AuthenticationStore.getId()
|
|
});
|
|
}
|
|
return r88;
|
|
};
|
|
User = function User(props) {
|
|
let props2;
|
|
let dominantColorFromImage, setState2, callback2, c22689_10;
|
|
let env22690;
|
|
const { participantId: participantId2, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
|
|
dominantColorFromImage = void 0;
|
|
setState2 = void 0;
|
|
callback2 = void 0;
|
|
c22689_10 = void 0;
|
|
const styles = useStyles();
|
|
let c22689_1 = styles;
|
|
const r32 = env22690 = {
|
|
$parent: env11456
|
|
};
|
|
env22690[0] = transitionState2;
|
|
env22690[1] = transitionCleanUp2;
|
|
useEffect($mk98403(r32), [transitionState2, transitionCleanUp2]);
|
|
const onTop = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
|
|
const context = useContext(VoicePanelStateContext);
|
|
const { channelId: channelId2, guildId, focused, mode, layoutManager: layoutManager2 } = context;
|
|
const stateFromStores3 = useStateFromStores([ChannelRTCStore], () => {
|
|
let r8 = ChannelRTCStore.getParticipant(channelId2, participantId2);
|
|
if (r8 == null) {
|
|
r8 = void 0;
|
|
}
|
|
return r8?.type === ParticipantTypes.USER ? r8 : void 0;
|
|
});
|
|
let r29 = stateFromStores3?.user;
|
|
if (r29 == null) {
|
|
r29 = UserStore.getCurrentUser();
|
|
}
|
|
dominantColorFromImage = useDominantColorFromImage(r29 == null ? void 0 : r29.getAvatarURL(guildId, 80, false));
|
|
const memo = useMemo(() => [c22689_1.user, onTop, {
|
|
backgroundColor: dominantColorFromImage
|
|
}], [styles, onTop, dominantColorFromImage]);
|
|
let state;
|
|
[state, setState2] = useState(false);
|
|
const surfaceDirectRendererExperiment = useSurfaceDirectRendererExperiment(stateFromStores3 == null ? void 0 : stateFromStores3.user?.id, {
|
|
location: "VoicePanelPIPContent"
|
|
});
|
|
callback2 = useCallback((a0, a1) => {
|
|
const r6 = a0 != null ? ChannelRTCStore.getParticipant(channelId2, a0) : void 0;
|
|
setState2(r6 != null && (0, isActivityParticipant)(r6) && a1 === VoicePanelModes.PANEL);
|
|
}, [channelId2]);
|
|
const r84 = () => focused.get()?.id;
|
|
r84.__closure = {
|
|
focused
|
|
};
|
|
r84.__workletHash = 3980010676581;
|
|
r84.__initData = c11456_30;
|
|
const c = function c(a0, a1) {
|
|
if (a0 !== a1) {
|
|
_ReanimatedRexport.runOnJS(callback2)(a0, mode.get());
|
|
}
|
|
};
|
|
c.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
updateIsActivityFocused: callback2,
|
|
mode
|
|
};
|
|
c.__workletHash = 5971237403457;
|
|
c.__initData = c11456_31;
|
|
useAnimatedReaction(r84, c);
|
|
const I = () => mode.get();
|
|
I.__closure = {
|
|
mode
|
|
};
|
|
I.__workletHash = 8288240256860;
|
|
I.__initData = c11456_32;
|
|
const S = function S(a0, a1) {
|
|
if (a0 !== a1) {
|
|
_ReanimatedRexport.runOnJS(callback2)(focused.get()?.id, a0);
|
|
}
|
|
};
|
|
S.__closure = {
|
|
runOnJS: _ReanimatedRexport.runOnJS,
|
|
updateIsActivityFocused: callback2,
|
|
focused
|
|
};
|
|
S.__workletHash = 12552370107483;
|
|
S.__initData = c11456_33;
|
|
useAnimatedReaction(I, S);
|
|
const stateFromStoresObject = useStateFromStoresObject([ChannelCallLifecycleStore], () => ({
|
|
isReactingToThermalState: ChannelCallLifecycleStore.isReactingToThermalState(),
|
|
consumedRequestToRespondToSeriousThermalState: ChannelCallLifecycleStore.consumedRequestToRespondToSeriousThermalState()
|
|
}));
|
|
const { isReactingToThermalState, consumedRequestToRespondToSeriousThermalState } = stateFromStoresObject;
|
|
const callback4 = useCallback(({ nativeEvent }) => {
|
|
layoutManager2.setTargetDimensions(participantId2, nativeEvent.width, nativeEvent.height);
|
|
}, [layoutManager2, participantId2]);
|
|
const r125 = useCanRenderParticipantVideo(stateFromStores3) && !(state && isReactingToThermalState);
|
|
c22689_10 = r125;
|
|
useEffect(() => {
|
|
if (!c22689_10) {
|
|
ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
|
|
}
|
|
}, [r125]);
|
|
const r134 = {
|
|
style: null,
|
|
children: null
|
|
};
|
|
if (r125) {
|
|
r134.style = [styles.blackBackground, styles.user];
|
|
r134.children = [<AnimatedVideoWrapper style={onTop} participantId={participantId2}>
|
|
<VideoStream useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={stateFromStores3.streamId} style={[styles.video, void 0]} onSize={callback4} onReady={markContentReady} />
|
|
</AnimatedVideoWrapper>, <InnerStroke />];
|
|
props2 = r134;
|
|
} else {
|
|
r134.style = memo;
|
|
r134.children = [<NativeView style={styles.avatarWrapper}>
|
|
{r29 != null ? <Avatar source={getCachedSourceFromURI(r29.getAvatarURL(guildId, 80, false))} size={state ? AvatarSizes.LARGE : AvatarSizes.XLARGE} avatarDecoration={stateFromStores3?.userAvatarDecoration} /> : null}
|
|
</NativeView>, <InnerStroke style={styles.userOpacity} />, state ? consumedRequestToRespondToSeriousThermalState ? <NativeView style={styles.thermalAlertIconContainer}>
|
|
<Icon style={styles.thermalAlertIcon} source={Module8346} color={styles.thermalAlertIcon.color} />
|
|
</NativeView> : null : null];
|
|
props2 = r134;
|
|
}
|
|
return <NativeView {...props2} />;
|
|
};
|
|
AnimatedVideoWrapper = function AnimatedVideoWrapper({ participantId: participantId4, style: style2, children }) {
|
|
const targetDimensionsSubscription = useTargetDimensionsSubscription(participantId4, useContext(VoicePanelStateContext).layoutManager);
|
|
const u = function u() {
|
|
const r8 = targetDimensionsSubscription.get();
|
|
const { width: width3, height: height3 } = r8;
|
|
const r0 = height3 < width3;
|
|
let width4 = "100%";
|
|
let height4 = "auto";
|
|
if (r0) {
|
|
width4 = "auto";
|
|
height4 = "100%";
|
|
}
|
|
return {
|
|
position: "absolute",
|
|
aspectRatio: width3 / height3,
|
|
width: width4,
|
|
height: height4
|
|
};
|
|
};
|
|
u.__closure = {
|
|
targetDimensions: targetDimensionsSubscription
|
|
};
|
|
u.__workletHash = 10377220209728;
|
|
u.__initData = c11456_35;
|
|
return (0, jsx)(ReanimatedNativeView, {
|
|
style: [style2, useAnimatedStyle(u)],
|
|
children
|
|
});
|
|
};
|
|
Stream = function Stream(props) {
|
|
let streamId2, c22692_5, ref, ref2, callback3, c22692_9;
|
|
let env22693;
|
|
const { participantId: participantId3, transitionState: transitionState2, transitionCleanUp: transitionCleanUp2 } = props;
|
|
streamId2 = void 0;
|
|
c22692_5 = void 0;
|
|
ref = void 0;
|
|
ref2 = void 0;
|
|
callback3 = void 0;
|
|
c22692_9 = void 0;
|
|
const styles = useStyles();
|
|
const mode2 = usePIPState().mode;
|
|
const r25 = env22693 = {
|
|
$parent: env11456
|
|
};
|
|
env22693[0] = transitionState2;
|
|
env22693[1] = transitionCleanUp2;
|
|
useEffect($mk98403(r25), [transitionState2, transitionCleanUp2]);
|
|
const style2 = transitionState2 === TransitionStates.YEETED ? styles.onTop : styles.onBottom;
|
|
const context = useContext(VoicePanelStateContext);
|
|
const { channelId: channelId3, layoutManager: layoutManager3 } = context;
|
|
const stateFromStoresObject = useStateFromStoresObject([ChannelRTCStore], () => {
|
|
const participant = ChannelRTCStore.getParticipant(channelId3, participantId3);
|
|
const r0 = participant != null && participant.type === ParticipantTypes.STREAM;
|
|
return {
|
|
streamId: r0 ? participant.streamId : void 0,
|
|
userId: r0 ? participant.user?.id : void 0
|
|
};
|
|
});
|
|
streamId2 = stateFromStoresObject.streamId;
|
|
const surfaceDirectRendererExperiment = useSurfaceDirectRendererExperiment(stateFromStoresObject.userId, {
|
|
location: "VoicePanelPIPContent.Stream"
|
|
});
|
|
const stateFromStores3 = useStateFromStores([ApplicationStreamingStore], () => ApplicationStreamingStore.getActiveStreamForStreamKey(participantId3)?.state);
|
|
const callback4 = useCallback(({ nativeEvent }) => {
|
|
layoutManager3.setTargetDimensions(participantId3, nativeEvent.width, nativeEvent.height);
|
|
}, [layoutManager3, participantId3]);
|
|
const r19 = PixelRatio.get();
|
|
c22692_5 = r19;
|
|
ref = useRef(0);
|
|
ref2 = useRef(0);
|
|
const callback5 = useCallback((a0) => {
|
|
if (streamId2 != null) {
|
|
const layout = a0.nativeEvent.layout;
|
|
const { width: width3, height: height3 } = layout;
|
|
if (!(width3 === ref.current && height3 === ref2.current)) {
|
|
ref.current = width3;
|
|
ref2.current = height3;
|
|
if (mode2 === VoicePanelPIPModes.IN_APP) {
|
|
updateVideoSize(streamId2, {
|
|
width: width3 * c22692_5,
|
|
height: height3 * c22692_5
|
|
}, 1);
|
|
}
|
|
}
|
|
}
|
|
}, [streamId2, r19, mode2]);
|
|
callback3 = useCallback((a0) => {
|
|
if (!(streamId2 == null || a0 || mode2 !== VoicePanelPIPModes.IN_APP)) {
|
|
const current = ref.current;
|
|
updateVideoSize(streamId2, {
|
|
width: current * c22692_5,
|
|
height: ref2.current * c22692_5
|
|
}, 1);
|
|
}
|
|
}, [streamId2, r19, mode2]);
|
|
useEffect(() => {
|
|
let c28200_0 = ExternalPip_android.addOnPipModeChangedListener(callback3);
|
|
return () => {
|
|
if (c28200_0 != null) {
|
|
c28200_0.remove();
|
|
}
|
|
};
|
|
}, [callback3]);
|
|
const r80 = streamId2 != null;
|
|
c22692_9 = r80;
|
|
useEffect(() => {
|
|
if (c22692_9) {
|
|
ComponentDispatch.dispatch(ComponentActions.VOICE_PANEL_PIP_CONTENT_READY);
|
|
}
|
|
}, [r80]);
|
|
return stateFromStores3 === ApplicationStreamStates.ENDED ? (0, jsx)(StreamEnded, {
|
|
style: styles.streamEmptyImage,
|
|
resizeMode: "contain"
|
|
}) : stateFromStores3 === ApplicationStreamStates.FAILED ? (0, jsx)(StreamFailed, {
|
|
style: styles.streamEmptyImage,
|
|
resizeMode: "contain"
|
|
}) : r80 ? <AnimatedVideoWrapper style={style2} participantId={participantId3}>
|
|
<VideoStream useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={streamId2} style={styles.video} onSize={callback4} onLayout={callback5} />
|
|
</AnimatedVideoWrapper> : <User participantId={participantId3} />;
|
|
};
|
|
getFocusedKey = function getFocusedKey(a0) {
|
|
return a0.id;
|
|
};
|
|
renderFocusedParticipant = function renderFocusedParticipant(a0, a1, a2, a3) {
|
|
if (a1.id === "--voice-panel-pip-empty") {
|
|
return (0, jsx)(EmptyPIP, {
|
|
transitionState: a2,
|
|
transitionCleanUp: a3
|
|
}, a0);
|
|
}
|
|
const props = {
|
|
participantId: a1.id,
|
|
transitionState: a2,
|
|
transitionCleanUp: a3
|
|
};
|
|
const type = a1.type;
|
|
if (ParticipantTypes.ACTIVITY === type) {
|
|
return <ActivityInVoice key={a0} {...props} />;
|
|
}
|
|
if (ParticipantTypes.STREAM === type) {
|
|
return <Stream key={a0} {...props} />;
|
|
}
|
|
if (ParticipantTypes.USER !== type) {
|
|
ParticipantTypes.HIDDEN_STREAM;
|
|
}
|
|
return <User key={a0} {...props} />;
|
|
};
|
|
areParticipantsEqual = function areParticipantsEqual(a0, a1) {
|
|
if (a0.length !== a1.length) {
|
|
return false;
|
|
}
|
|
if (a0.length === 0) {
|
|
return true;
|
|
}
|
|
let r14 = 0;
|
|
for (const item of a0) {
|
|
if (item.id === a1[r14]?.id) {
|
|
r14 = r14 + 1;
|
|
continue;
|
|
}
|
|
return false;
|
|
}
|
|
return true;
|
|
};
|
|
useStyles = createStyles({
|
|
contentWrapper: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
overflow: "hidden",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
userOpacity: {
|
|
opacity: 0.1
|
|
},
|
|
activity: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
},
|
|
user: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
video: {
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%"
|
|
},
|
|
avatarWrapper: {
|
|
position: "relative",
|
|
width: "56%",
|
|
height: "56%",
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
thermalAlertIconContainer: {
|
|
width: 22,
|
|
height: 22,
|
|
backgroundColor: "rgba(78, 80, 88, 0.48)",
|
|
borderRadius: Module712.radii.round,
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
position: "absolute",
|
|
top: 6,
|
|
left: 6
|
|
},
|
|
thermalAlertIcon: {
|
|
width: 14,
|
|
height: 14,
|
|
color: Module712.colors.WHITE
|
|
},
|
|
onTop: {
|
|
zIndex: 1
|
|
},
|
|
onBottom: {
|
|
zIndex: 0
|
|
},
|
|
streamEmptyImage: {
|
|
width: "50%"
|
|
},
|
|
emptyPip: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: Module712.colors.BLACK
|
|
},
|
|
innerStroke: {
|
|
position: "absolute",
|
|
top: -1,
|
|
left: -1,
|
|
bottom: -1,
|
|
right: -1,
|
|
borderWidth: 2,
|
|
borderColor: "white",
|
|
zIndex: 1,
|
|
opacity: 0.3
|
|
},
|
|
blackBackground: {
|
|
backgroundColor: "black"
|
|
}
|
|
});
|
|
c11456_27 = {
|
|
code: "function VoicePanelPIPContentTsx1(){const{windowDimensions}=this.__closure;return windowDimensions.get();}"
|
|
};
|
|
c11456_28 = {
|
|
code: "function VoicePanelPIPContentTsx2(windowDimensionsVal,previousWindowDimensionsVal){const{runOnJS,handleTargetAspectRatioParams}=this.__closure;if(windowDimensionsVal!==previousWindowDimensionsVal){runOnJS(handleTargetAspectRatioParams)(windowDimensionsVal);}}"
|
|
};
|
|
c11456_30 = {
|
|
code: "function VoicePanelPIPContentTsx3(){const{focused}=this.__closure;var _focused$get;return(_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id;}"
|
|
};
|
|
c11456_31 = {
|
|
code: "function VoicePanelPIPContentTsx4(focusedParticipantId,previousFocusedParticipantId){const{runOnJS,updateIsActivityFocused,mode}=this.__closure;if(focusedParticipantId!==previousFocusedParticipantId){runOnJS(updateIsActivityFocused)(focusedParticipantId,mode.get());}}"
|
|
};
|
|
c11456_32 = {
|
|
code: "function VoicePanelPIPContentTsx5(){const{mode}=this.__closure;return mode.get();}"
|
|
};
|
|
c11456_33 = {
|
|
code: "function VoicePanelPIPContentTsx6(modeVal,previousModeVal){const{runOnJS,updateIsActivityFocused,focused}=this.__closure;if(modeVal!==previousModeVal){var _focused$get;runOnJS(updateIsActivityFocused)((_focused$get=focused.get())===null||_focused$get===void 0?void 0:_focused$get.id,modeVal);}}"
|
|
};
|
|
c11456_35 = {
|
|
code: "function VoicePanelPIPContentTsx7(){const{targetDimensions}=this.__closure;const{width:targetWidth,height:targetHeight}=targetDimensions.get();let height='100%';let width='100%';if(targetHeight<targetWidth){width='auto';}else{height='auto';}return{position:'absolute',aspectRatio:targetWidth/targetHeight,width:width,height:height};}"
|
|
};
|
|
EmptyPIP = Module19.memo(function EmptyPIP({ transitionState, transitionCleanUp }) {
|
|
const styles = useStyles();
|
|
useEffect(() => {
|
|
if (transitionState === TransitionStates.YEETED) {
|
|
transitionCleanUp();
|
|
}
|
|
}, [transitionState, transitionCleanUp]);
|
|
return (0, jsx)(NativeView, {
|
|
style: styles.emptyPip
|
|
});
|
|
});
|
|
const r114 = Module19.memo(function VoicePanelPIPContent() {
|
|
const channelId4 = useContext(VoicePanelStateContext).channelId;
|
|
const pIPState = usePIPState();
|
|
const { id, width: width2, height: height2 } = pIPState;
|
|
const styles = useStyles();
|
|
let c22695_4 = styles;
|
|
const id2 = AuthenticationStore.getId();
|
|
const stateFromStores3 = useStateFromStores([ChannelRTCStore], () => {
|
|
let id3 = id;
|
|
let type = id != null ? ChannelRTCStore.getParticipant(channelId4, id)?.type : ParticipantTypes.USER;
|
|
if (type == null) {
|
|
type = ParticipantTypes.USER;
|
|
}
|
|
if (id == null) {
|
|
id3 = id2;
|
|
}
|
|
return [{
|
|
id: id3,
|
|
type
|
|
}];
|
|
}, [id, channelId4, id2], areParticipantsEqual);
|
|
return <NativeView style={useMemo(() => [[c22695_4.contentWrapper, {
|
|
borderRadius: getVoicePanelPIPBorderRadius(width2, height2)
|
|
}]], [width2, height2, styles.contentWrapper])} pointerEvents="none">
|
|
<TransitionGroup items={stateFromStores3} renderItem={renderFocusedParticipant} getItemKey={getFocusedKey} />
|
|
</NativeView>;
|
|
});
|
|
export default r114;
|