// 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;