yeet

modules/media_panel/native/MediaPlaybackPanelConstants.tsx

@@ -0,0 +1,14 @@
+// Metro module 13591 (f13592).
+const r9 = {
+  DISMISSED: "dismissed",
+  PIP: "pip"
+};
+export { r9 as MediaPlaybackPanelModes };
+export const PLAYBACK_COMPLETION_DETECTION_TOLERANCE = 100;
+export const PLAYBACK_PROGRESS_UPDATE_INTERVAL = 500;
+export const MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS = {
+  stiffness: 320,
+  mass: 0.25,
+  damping: 15,
+  overshootClamping: true
+};

modules/media_panel/native/MediaPlaybackPanelContainer.tsx

@@ -0,0 +1,46 @@
+// Metro module 16040 (f16041).
+import { memo } from "react";
+import { useMediaPlayerManagerStore } from "../../media/native/MediaPlayerManager";
+import { useShallow } from "../../../_bundle/Module3804";
+import MediaPlaybackPanelController from "./MediaPlaybackPanelController";
+import MediaPlaybackPanelUI from "./MediaPlaybackPanelUI";
+const r20 = memo(function MediaPlaybackPanelContainer() {
+  return useMediaPlayerManagerStore(useShallow((a0) => {
+    const showPip = a0.showPip;
+    const r0 = (showPip ? !a0.canAccessMedia : !showPip) || a0.activeMediaPlayerSource == null;
+    let r12 = !r0;
+    if (!r0) {
+      const mediaSourceMessage = a0.mediaSourceMessage;
+      const attachmentIndex = a0.activeMediaPlayerSource?.attachmentIndex;
+      const r3 = mediaSourceMessage == null;
+      let r16 = false;
+      if (!r3) {
+        const r17 = attachmentIndex == null;
+        r16 = false;
+        if (!r17) {
+          const r18 = mediaSourceMessage == null;
+          let r7 = void 0;
+          if (!r18) {
+            const contentMessage = mediaSourceMessage.getContentMessage();
+            r7 = contentMessage == null ? void 0 : contentMessage.attachments[attachmentIndex];
+          }
+          const r22 = r7 == null;
+          let r23 = void 0;
+          if (!r22) {
+            const content_type = r7.content_type;
+            r23 = content_type == null ? void 0 : content_type.startsWith("audio");
+          }
+          if (r23 == null) {
+            r23 = false;
+          }
+          r16 = r23;
+        }
+      }
+      r12 = r16;
+    }
+    return r12;
+  })) ? <MediaPlaybackPanelController>
+    <MediaPlaybackPanelUI />
+  </MediaPlaybackPanelController> : null;
+});
+export default r20;

modules/media_panel/native/MediaPlaybackPanelController.tsx

@@ -0,0 +1,121 @@
+// Metro module 16041 (f16042).
+import _slicedToArray from "../../../_bundle/_slicedToArray";
+import { useEffect, useRef, useState, useCallback, useLayoutEffect } from "react";
+import AccessibilityStore from "../../a11y/AccessibilityStore";
+import EmbeddedActivitiesStore from "../../activities/EmbeddedActivitiesStore";
+import VoicePanelStore from "../../voice_panel/VoicePanelStore";
+import { MediaPlaybackPanelModes } from "./MediaPlaybackPanelConstants";
+import { ActivityPanelModes } from "../../activities/panel/ActivityPanelConstants";
+import { MorphablePanelModes } from "../../panels/morphable/native/MorphablePanelConstants";
+import { useSharedValue, useDerivedValue } from "../../reanimated/ReanimatedRexport";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import usePIPAvoidanceSpecs from "../../activities/panel/native/pip/usePIPAvoidanceSpecs";
+import MediaPlayerManager from "../../media/native/MediaPlayerManager";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import MediaPlaybackPanelStateContext from "./MediaPlaybackPanelStateContext";
+const __initData = {
+  code: "function MediaPlaybackPanelControllerTsx1(){const{mode,MediaPlaybackPanelModes,MorphablePanelModes}=this.__closure;switch(mode.get()){case MediaPlaybackPanelModes.PIP:{return MorphablePanelModes.PIP;}default:{return MorphablePanelModes.UNDEFINED;}}}"
+};
+export default function MediaPlaybackPanelController(props) {
+  let sharedValue, derivedValue, sharedValue2, sharedValue3, sharedValue4, pipAvoidanceSpecs, sharedValue5, sharedValue6, sharedValue7, sharedValue8, ref, state, setState, callback, c22749_14, stateFromStores;
+  const children = props.children;
+  sharedValue = void 0;
+  derivedValue = void 0;
+  sharedValue2 = void 0;
+  sharedValue3 = void 0;
+  sharedValue4 = void 0;
+  pipAvoidanceSpecs = void 0;
+  sharedValue5 = void 0;
+  sharedValue6 = void 0;
+  sharedValue7 = void 0;
+  sharedValue8 = void 0;
+  ref = void 0;
+  state = void 0;
+  setState = void 0;
+  callback = void 0;
+  c22749_14 = void 0;
+  stateFromStores = void 0;
+  const sharedValue9 = useSharedValue(MediaPlaybackPanelModes.PIP);
+  const sharedValue13 = useSharedValue({
+    height: 0,
+    width: 0
+  });
+  const sharedValue12 = useSharedValue({
+    x: -1,
+    y: -1
+  });
+  const sharedValue10 = useSharedValue(AccessibilityStore.useReducedMotion);
+  useEffect(() => {
+    const onChange2 = function onChange() {
+      if (AccessibilityStore.useReducedMotion !== sharedValue10.get()) {
+        sharedValue10.set(AccessibilityStore.useReducedMotion);
+      }
+    };
+    AccessibilityStore.addReactChangeListener(onChange2);
+    return () => {
+      AccessibilityStore.removeReactChangeListener(onChange2);
+    };
+  }, [sharedValue10]);
+  const sharedValue11 = useSharedValue(true);
+  const sharedValue14 = useSharedValue(0);
+  const r51 = function() {
+    return sharedValue9.get() === MediaPlaybackPanelModes.PIP ? MorphablePanelModes.PIP : MorphablePanelModes.UNDEFINED;
+  };
+  r51.__closure = {
+    mode: sharedValue9,
+    MediaPlaybackPanelModes,
+    MorphablePanelModes
+  };
+  r51.__workletHash = 10375114450450;
+  r51.__initData = __initData;
+  const derivedValue2 = useDerivedValue(r51);
+  const pIPAvoidanceSpecs = usePIPAvoidanceSpecs(useSafeAreaInsets_native());
+  const sharedValue15 = useSharedValue(false);
+  const sharedValue16 = useSharedValue({
+    x: 0,
+    y: 0,
+    gestureActive: false
+  });
+  sharedValue = sharedValue9;
+  derivedValue = derivedValue2;
+  sharedValue2 = sharedValue13;
+  sharedValue3 = sharedValue10;
+  sharedValue4 = sharedValue12;
+  pipAvoidanceSpecs = pIPAvoidanceSpecs;
+  sharedValue5 = sharedValue14;
+  sharedValue6 = sharedValue11;
+  sharedValue7 = sharedValue15;
+  sharedValue8 = sharedValue16;
+  ref = useRef(void 0);
+  [state, setState] = useState(sharedValue9.get());
+  callback = useCallback(() => {
+    let r0 = state === MediaPlaybackPanelModes.PIP;
+    if (r0) {
+      setState(MediaPlaybackPanelModes.DISMISSED);
+      MediaPlayerManager.userDidClosePip();
+      r0 = true;
+    }
+    return r0;
+  }, [state, setState]);
+  const r88 = VoicePanelStore((a0) => a0.voicePanelsPIP.size > 0);
+  c22749_14 = r88;
+  stateFromStores = useStateFromStores([EmbeddedActivitiesStore], () => EmbeddedActivitiesStore.getActivityPanelMode() === ActivityPanelModes.PIP);
+  useLayoutEffect(() => {
+    sharedValue6.set(c22749_14 ? !c22749_14 : !stateFromStores);
+  }, [sharedValue6, r88, stateFromStores]);
+  return <MediaPlaybackPanelStateContext.Provider value={_slicedToArray(useState(() => ({
+    mode: sharedValue,
+    setMode: setState,
+    morphablePanelMode: derivedValue,
+    wrapperDimensions: sharedValue2,
+    useReducedMotion: sharedValue3,
+    pipState: sharedValue4,
+    pipAvoidanceSpecs,
+    dismissToPipGestureRef: ref,
+    dismissPanel: callback,
+    scrollPosition: sharedValue5,
+    canShowPIP: sharedValue6,
+    lockScrolling: sharedValue7,
+    wrapperOffset: sharedValue8
+  })), 1)[0]}>{children}</MediaPlaybackPanelStateContext.Provider>;
+};

modules/media_panel/native/MediaPlaybackPanelStateContext.tsx

@@ -0,0 +1,40 @@
+// Metro module 16042 (f16043).
+import { createContext } from "react";
+import * as _MediaPlaybackPanelConstants from "./MediaPlaybackPanelConstants";
+import { MorphablePanelModes } from "../../panels/morphable/native/MorphablePanelConstants";
+import { createFakeSharedValue } from "../../reanimated/ReanimatedHelperTypes";
+const context = createContext({
+  mode: createFakeSharedValue(_MediaPlaybackPanelConstants.MediaPlaybackPanelModes.PIP),
+  setMode: () => {
+    throw new Error("MediaPlaybackPanelModes.Provider.setMode: not called within a context provider");
+  },
+  morphablePanelMode: createFakeSharedValue(MorphablePanelModes.PIP),
+  wrapperDimensions: createFakeSharedValue({
+    width: 0,
+    height: 0
+  }),
+  useReducedMotion: createFakeSharedValue(false),
+  pipState: createFakeSharedValue({
+    x: -1,
+    y: -1
+  }),
+  pipAvoidanceSpecs: createFakeSharedValue({
+    top: 0,
+    bottom: 0
+  }),
+  dismissToPipGestureRef: {
+    current: void 0
+  },
+  dismissPanel: () => {
+    throw new Error("VoicePanelContextType.Provider.dismissDrawer: not called within a context provider");
+  },
+  scrollPosition: createFakeSharedValue(0),
+  canShowPIP: createFakeSharedValue(true),
+  lockScrolling: createFakeSharedValue(false),
+  wrapperOffset: createFakeSharedValue({
+    x: 0,
+    y: 0,
+    gestureActive: false
+  })
+});
+export default context;

modules/media_panel/native/MediaPlaybackPanelUI.tsx

@@ -0,0 +1,340 @@
+// Metro module 16043 (f16044).
+import Module19, { useContext } from "react";
+import SafeAreaDisabledStore from "../../panels/morphable/native/SafeAreaDisabledStore";
+import { MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS, MediaPlaybackPanelModes } from "./MediaPlaybackPanelConstants";
+import { IS_IOS } from "../../panels/morphable/native/MorphablePanelConstants";
+import { BORDER_RADIUS_PHYSICS } from "../../voice_panel/VoicePanelConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../safe_area/useSafeAreaInsets.native";
+import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
+import MediaPlaybackPanelStateContext from "./MediaPlaybackPanelStateContext";
+import ReanimatedRexport, { useAnimatedStyle, useAnimatedReaction, useSharedValue } from "../../reanimated/ReanimatedRexport";
+import * as _cheapWorkletShallowEqual from "../../reanimated/native/cheapWorkletShallowEqual";
+import updateSharedValueIfChanged_native from "../../reanimated/utils/updateSharedValueIfChanged.native";
+import * as _MorphablePanelUtils from "../../panels/morphable/native/MorphablePanelUtils";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import * as _timingPresets from "../../../design/animation/reanimated/timing/timingPresets";
+import * as _spring from "../../../design/animation/reanimated/spring/spring";
+import useMorphablePanelGesture, { MorphablePanelModes } from "../../panels/morphable/native/useMorphablePanelGesture";
+import { LayerScope } from "../../../design/components/Layers/native/LayerScope.native";
+import { GestureDetector } from "../../../_bundle/Module5273";
+import MediaPlaybackPip from "./MediaPlaybackPip";
+const useStyles = createStyles({
+  wrapperAnimationPresets: {
+    opacity: 0
+  },
+  wrapper: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 1
+  },
+  mask: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    overflow: "hidden",
+    borderWidth: 1,
+    borderRadius: Module712.radii.xl,
+    borderColor: Module712.colors.CHAT_BORDER
+  },
+  maskElevation: {
+    ...Module712.shadows.SHADOW_LOW_HOVER
+  },
+  maskEmptyElevation: {
+    xOffset: 0,
+    yOffset: 0,
+    shadowColorIos: "#000000",
+    shadowOpacity: 0,
+    shadowRadius: 0,
+    elevation: 0,
+    shadowColorAndroid: "#000000"
+  },
+  content: {
+    flex: 1,
+    backgroundColor: Module712.colors.BACKGROUND_SURFACE_HIGH
+  }
+});
+const __initData = {
+  code: "function MediaPlaybackPanelUITsx1(){const{mode,windowDimensions,canShowPIP}=this.__closure;return{mode:mode.get(),windowDimensions:windowDimensions,canShowPIP:canShowPIP.get()};}"
+};
+const __initData2 = {
+  code: "function MediaPlaybackPanelUITsx2(props,previous){const{cheapWorkletShallowEqual,MediaPlaybackPanelModes,updateSharedValueIfChanged,wrapperDimensions,wrapperOffset}=this.__closure;if(cheapWorkletShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;const{mode:modeToSet,windowDimensions:windowDimensions,canShowPIP:canShowPIP}=props;switch(modeToSet){case MediaPlaybackPanelModes.PIP:{const{width:width,height:height}=canShowPIP?{width:120,height:120}:{width:0,height:0};updateSharedValueIfChanged(wrapperDimensions,{width:width,height:height});break;}case MediaPlaybackPanelModes.DISMISSED:updateSharedValueIfChanged(wrapperOffset,{y:windowDimensions.height});break;default:modeToSet;}}"
+};
+const __initData3 = {
+  code: "function MediaPlaybackPanelUITsx3(){const{mode,wrapperDimensions,pipAvoidanceSpecs,wrapperOffset,windowDimensions,safeArea,pipState}=this.__closure;return{mode:mode.get(),wrapperDimensions:wrapperDimensions.get(),pipAvoidanceSpecs:pipAvoidanceSpecs.get(),wrapperOffset:wrapperOffset.get(),windowDimensions:windowDimensions,safeArea:safeArea,pipState:pipState.get()};}"
+};
+const __initData4 = {
+  code: "function MediaPlaybackPanelUITsx4(props,previous){const{cheapWorkletShallowEqual,MediaPlaybackPanelModes,getClampedPIPPosition,safeArea,disableHorizontalSafeAreas,wrapperOpacity,animateWrapperTranslation,wrapperTranslationX,wrapperTranslationY}=this.__closure;if(cheapWorkletShallowEqual(props,previous!==null&&previous!==void 0?previous:undefined))return;const{mode:mode,wrapperDimensions:wrapperDimensions,pipAvoidanceSpecs:pipAvoidanceSpecs,wrapperOffset:wrapperOffset,windowDimensions:windowDimensions,pipState:pipState}=props;let x=0;let y=0;const{gestureActive:gestureActive}=wrapperOffset;const{x:pipX,y:pipY}=pipState;switch(mode){case MediaPlaybackPanelModes.PIP:{const clampedPosition=getClampedPIPPosition({pipX:pipX,pipY:pipY,width:120,height:120,windowDimensions:windowDimensions,safeArea:safeArea,bottomAvoidanceRegion:pipAvoidanceSpecs.bottom,topAvoidanceRegion:pipAvoidanceSpecs.top,positionOffset:gestureActive?wrapperOffset:undefined,disableHorizontalSafeAreas:disableHorizontalSafeAreas});x=clampedPosition.x;y=clampedPosition.y;wrapperOpacity.set(1);break;}case MediaPlaybackPanelModes.DISMISSED:{y=wrapperDimensions.height;wrapperOpacity.set(0);break;}}const previousPIPState=previous===null||previous===void 0?void 0:previous.pipState;const pipPositionChanged=pipX!==(previousPIPState===null||previousPIPState===void 0?void 0:previousPIPState.x)||pipY!==(previousPIPState===null||previousPIPState===void 0?void 0:previousPIPState.y);const shouldAnimateForPIP=mode===MediaPlaybackPanelModes.PIP&&pipPositionChanged&&!wrapperOffset.gestureActive;animateWrapperTranslation.set(shouldAnimateForPIP||mode!==MediaPlaybackPanelModes.PIP);wrapperTranslationX.set(x);wrapperTranslationY.set(y);}"
+};
+const __initData5 = {
+  code: "function MediaPlaybackPanelUITsx5(){const{withTiming,wrapperOpacity,timingFast,animateWrapperTranslation,withSpring,wrapperTranslationX,MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS,wrapperTranslationY,wrapperDimensions,wrapperElevationStyles}=this.__closure;const opacity=withTiming(wrapperOpacity.get(),timingFast,'respect-motion-settings');return{transform:[{translateX:animateWrapperTranslation.get()?withSpring(wrapperTranslationX.get(),MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS,'animate-always'):wrapperTranslationX.get()},{translateY:animateWrapperTranslation.get()?withSpring(wrapperTranslationY.get(),MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS,animateWrapperTranslation.get()?'respect-motion-settings':'animate-never'):wrapperTranslationY.get()}],opacity:opacity,width:wrapperDimensions.get().width,height:wrapperDimensions.get().height,...wrapperElevationStyles};}"
+};
+const __initData6 = {
+  code: "function MediaPlaybackPanelUITsx6(){const{withSpring,borderRadius,BORDER_RADIUS_PHYSICS,maskElevationStyles}=this.__closure;return{borderRadius:withSpring(borderRadius,BORDER_RADIUS_PHYSICS,'animate-always'),...maskElevationStyles};}"
+};
+const __initData7 = {
+  code: "function MediaPlaybackPanelUITsx7(){const{windowDimensions}=this.__closure;const{height:height,width:width}=windowDimensions;return{position:'absolute',top:0,left:0,width:width,height:height,overflow:'hidden'};}"
+};
+const __initData8 = {
+  code: "function MediaPlaybackPanelUITsx8(){const{styles}=this.__closure;const topBorderRadius=0;const top=0;return{flexDirection:'column',backgroundColor:styles.content.backgroundColor,borderTopStartRadius:topBorderRadius,borderTopEndRadius:topBorderRadius,top:top,overflow:'hidden'};}"
+};
+export default function MediaPlaybackPanelUI() {
+  let wrapperDimensions, wrapperOffset, styles2, safeArea, windowDimensions, mode, pipState, pipAvoidanceSpecs, canShowPIP, sharedValue, sharedValue2, sharedValue3, sharedValue4, disableHorizontalSafeAreas, maskElevation, maskEmptyElevation, animatedStyle, xl, animatedStyle2;
+  const styles = useStyles();
+  const windowDimensions_native = useWindowDimensions_native();
+  let c22751_1 = windowDimensions_native;
+  const context = useContext(MediaPlaybackPanelStateContext);
+  const { wrapperDimensions: wrapperDimensions2, wrapperOffset: wrapperOffset2 } = context;
+  const r36 = function() {
+    return {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: c22751_1.width,
+      height: c22751_1.height,
+      overflow: "hidden"
+    };
+  };
+  r36.__closure = {
+    windowDimensions: windowDimensions_native
+  };
+  r36.__workletHash = 5768037716653;
+  r36.__initData = __initData7;
+  const animatedStyle3 = useAnimatedStyle(r36);
+  wrapperDimensions = wrapperDimensions2;
+  wrapperOffset = wrapperOffset2;
+  styles2 = void 0;
+  safeArea = void 0;
+  windowDimensions = void 0;
+  mode = void 0;
+  pipState = void 0;
+  pipAvoidanceSpecs = void 0;
+  canShowPIP = void 0;
+  sharedValue = void 0;
+  sharedValue2 = void 0;
+  sharedValue3 = void 0;
+  sharedValue4 = void 0;
+  disableHorizontalSafeAreas = void 0;
+  maskElevation = void 0;
+  maskEmptyElevation = void 0;
+  animatedStyle = void 0;
+  xl = void 0;
+  animatedStyle2 = void 0;
+  styles2 = useStyles();
+  safeArea = useSafeAreaInsets_native();
+  windowDimensions = useWindowDimensions_native();
+  const context2 = Module19.useContext(MediaPlaybackPanelStateContext);
+  mode = context2.mode;
+  pipState = context2.pipState;
+  pipAvoidanceSpecs = context2.pipAvoidanceSpecs;
+  canShowPIP = context2.canShowPIP;
+  const u = () => ({
+    mode: mode.get(),
+    windowDimensions,
+    canShowPIP: canShowPIP.get()
+  });
+  u.__closure = {
+    mode,
+    windowDimensions,
+    canShowPIP
+  };
+  u.__workletHash = 4412661953046;
+  u.__initData = __initData;
+  const r55 = function(a0, a1) {
+    if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, a1 == null ? void 0 : a1)) {
+      const { mode: mode2, windowDimensions: windowDimensions2, canShowPIP: canShowPIP2 } = a0;
+      if (MediaPlaybackPanelModes.PIP === mode2) {
+        const r25 = canShowPIP2 ? {
+          width: 120,
+          height: 120
+        } : {
+          width: 0,
+          height: 0
+        };
+        updateSharedValueIfChanged_native(wrapperDimensions, {
+          width: r25.width,
+          height: r25.height
+        });
+      } else if (MediaPlaybackPanelModes.DISMISSED === mode2) {
+        updateSharedValueIfChanged_native(wrapperOffset, {
+          y: windowDimensions2.height
+        });
+      }
+    }
+  };
+  r55.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    MediaPlaybackPanelModes,
+    updateSharedValueIfChanged: updateSharedValueIfChanged_native,
+    wrapperDimensions,
+    wrapperOffset
+  };
+  r55.__workletHash = 5458787116551;
+  r55.__initData = __initData2;
+  useAnimatedReaction(u, r55);
+  sharedValue = useSharedValue(0);
+  sharedValue2 = useSharedValue(0);
+  sharedValue3 = useSharedValue(0);
+  sharedValue4 = useSharedValue(false);
+  disableHorizontalSafeAreas = SafeAreaDisabledStore((a0) => a0.shouldDisableSafeAreas());
+  const R = () => ({
+    mode: mode.get(),
+    wrapperDimensions: wrapperDimensions.get(),
+    pipAvoidanceSpecs: pipAvoidanceSpecs.get(),
+    wrapperOffset: wrapperOffset.get(),
+    windowDimensions,
+    safeArea,
+    pipState: pipState.get()
+  });
+  R.__closure = {
+    mode,
+    wrapperDimensions,
+    pipAvoidanceSpecs,
+    wrapperOffset,
+    windowDimensions,
+    safeArea,
+    pipState
+  };
+  R.__workletHash = 4950432193502;
+  R.__initData = __initData3;
+  const C = function C(a0, a1) {
+    let r28, r29;
+    if (!_cheapWorkletShallowEqual.cheapWorkletShallowEqual(a0, a1 == null ? void 0 : a1)) {
+      const { mode: mode2, wrapperDimensions: wrapperDimensions2, pipAvoidanceSpecs: pipAvoidanceSpecs2, wrapperOffset: wrapperOffset2, windowDimensions: windowDimensions2, pipState: pipState2 } = a0;
+      const gestureActive = wrapperOffset2.gestureActive;
+      const { x: pipX, y: pipY } = pipState2;
+      if (MediaPlaybackPanelModes.PIP === mode2) {
+        const clampedPIPPosition = _MorphablePanelUtils.getClampedPIPPosition({
+          pipX,
+          pipY,
+          width: 120,
+          height: 120,
+          windowDimensions: windowDimensions2,
+          safeArea,
+          bottomAvoidanceRegion: pipAvoidanceSpecs2.bottom,
+          topAvoidanceRegion: pipAvoidanceSpecs2.top,
+          positionOffset: gestureActive ? wrapperOffset2 : void 0,
+          disableHorizontalSafeAreas
+        });
+        r29 = clampedPIPPosition.x;
+        r28 = clampedPIPPosition.y;
+        sharedValue3.set(1);
+      } else {
+        const DISMISSED = MediaPlaybackPanelModes.DISMISSED;
+        r28 = 0;
+        r29 = 0;
+        if (DISMISSED === mode2) {
+          r28 = wrapperDimensions2.height;
+          sharedValue3.set(0);
+          r29 = 0;
+        }
+      }
+      const pipState3 = a1?.pipState;
+      const r49 = pipX !== pipState3?.x || pipY !== pipState3?.y;
+      sharedValue4.set(mode2 === MediaPlaybackPanelModes.PIP && r49 && !wrapperOffset2.gestureActive || mode2 !== MediaPlaybackPanelModes.PIP);
+      sharedValue.set(r29);
+      sharedValue2.set(r28);
+    }
+  };
+  C.__closure = {
+    cheapWorkletShallowEqual: _cheapWorkletShallowEqual.cheapWorkletShallowEqual,
+    MediaPlaybackPanelModes,
+    getClampedPIPPosition: _MorphablePanelUtils.getClampedPIPPosition,
+    safeArea,
+    disableHorizontalSafeAreas,
+    wrapperOpacity: sharedValue3,
+    animateWrapperTranslation: sharedValue4,
+    wrapperTranslationX: sharedValue,
+    wrapperTranslationY: sharedValue2
+  };
+  C.__workletHash = 10793489581273;
+  C.__initData = __initData4;
+  useAnimatedReaction(R, C);
+  maskElevation = mode.get() === MediaPlaybackPanelModes.PIP && IS_IOS ? styles2.maskElevation : styles2.maskEmptyElevation;
+  maskEmptyElevation = mode.get() === MediaPlaybackPanelModes.PIP && !IS_IOS ? styles2.maskElevation : styles2.maskEmptyElevation;
+  const L = function L() {
+    const opacity = _timing.withTiming(sharedValue3.get(), _timingPresets.timingFast, "respect-motion-settings");
+    return {
+      transform: [{
+        translateX: sharedValue4.get() ? _spring.withSpring(sharedValue.get(), MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS, "animate-always") : sharedValue.get()
+      }, {
+        translateY: sharedValue4.get() ? _spring.withSpring(sharedValue2.get(), MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS, sharedValue4.get() ? "respect-motion-settings" : "animate-never") : sharedValue2.get()
+      }],
+      opacity,
+      width: wrapperDimensions.get().width,
+      height: wrapperDimensions.get().height,
+      ...maskElevation
+    };
+  };
+  L.__closure = {
+    withTiming: _timing.withTiming,
+    wrapperOpacity: sharedValue3,
+    timingFast: _timingPresets.timingFast,
+    animateWrapperTranslation: sharedValue4,
+    withSpring: _spring.withSpring,
+    wrapperTranslationX: sharedValue,
+    MEDIA_PLAYBACK_PANEL_LAYOUT_PHYSICS,
+    wrapperTranslationY: sharedValue2,
+    wrapperDimensions,
+    wrapperElevationStyles: maskElevation
+  };
+  L.__workletHash = 11049335639852;
+  L.__initData = __initData5;
+  animatedStyle = useAnimatedStyle(L);
+  xl = Module712.radii.xl;
+  const B = function B() {
+    return {
+      borderRadius: _spring.withSpring(xl, BORDER_RADIUS_PHYSICS, "animate-always"),
+      ...maskEmptyElevation
+    };
+  };
+  B.__closure = {
+    withSpring: _spring.withSpring,
+    borderRadius: xl,
+    BORDER_RADIUS_PHYSICS,
+    maskElevationStyles: maskEmptyElevation
+  };
+  B.__workletHash = 7035830192327;
+  B.__initData = __initData6;
+  animatedStyle2 = useAnimatedStyle(B);
+  const [style, style2] = [Module19.useMemo(() => [animatedStyle, styles2.wrapper, styles2.wrapperAnimationPresets], [animatedStyle, styles2.wrapper, styles2.wrapperAnimationPresets]), Module19.useMemo(() => [animatedStyle2, styles2.mask], [animatedStyle2, styles2.mask])];
+  const b = function b() {
+    return {
+      flexDirection: "column",
+      backgroundColor: styles.content.backgroundColor,
+      borderTopStartRadius: 0,
+      borderTopEndRadius: 0,
+      top: 0,
+      overflow: "hidden"
+    };
+  };
+  b.__closure = {
+    styles
+  };
+  b.__workletHash = 8557652955267;
+  b.__initData = __initData8;
+  const animatedStyle4 = useAnimatedStyle(b);
+  const context3 = Module19.useContext(MediaPlaybackPanelStateContext);
+  return <LayerScope>
+    <ReanimatedRexport.View style={animatedStyle3} pointerEvents="box-none">
+      <ReanimatedRexport.View style={style}>
+        <ReanimatedRexport.View style={style2}>
+          <GestureDetector gesture={useMorphablePanelGesture({
+            panGestureEnabled: true,
+            mode: MorphablePanelModes.PIP,
+            pipState: context3.pipState,
+            wrapperOffset: context3.wrapperOffset
+          })}>
+            <ReanimatedRexport.View style={[styles.content, animatedStyle4]}>
+              <MediaPlaybackPip />
+            </ReanimatedRexport.View>
+          </GestureDetector>
+        </ReanimatedRexport.View>
+      </ReanimatedRexport.View>
+    </ReanimatedRexport.View>
+  </LayerScope>;
+};

modules/media_panel/native/MediaPlaybackPip.tsx

@@ -0,0 +1,347 @@
+// Metro module 16044 (f16045).
+import { useState, useMemo, useCallback, useRef, useEffect, useContext } from "react";
+import { Easing, TouchableOpacity, View, StyleSheet } from "react-native";
+import ChannelStore from "../../../stores/ChannelStore";
+import MessageStore from "../../../stores/MessageStore";
+import RelationshipStore from "../../../stores/RelationshipStore";
+import UserStore from "../../../stores/UserStore";
+import { AnalyticEvents, MessageFlags, Routes } from "../../../Constants";
+import { SquarePIPReferenceDimensions } from "../../voice_panel/native/pip/VoicePanelPIPConstants";
+import { createStyles } from "../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../_bundle/Module712";
+import { useToken } from "../../../design/tokens/native/useToken";
+import { useStateFromStores } from "../../../_bundle/Module589";
+import { computeChannelName } from "../../channel/useChannelName";
+import getDisplayFilename from "../../messages/getDisplayFilename";
+import { Text } from "../../../design/components/Text/native/Text";
+import { Marquee } from "../../../_bundle/AnimatedChild";
+import Module4611 from "../../../_bundle/Module4611";
+import MessageActionCreators from "../../../actions/MessageActionCreators";
+import safeTransitionTo_native from "../../links/safeTransitionTo.native";
+import ReanimatedRexport, { useAnimatedStyle } from "../../reanimated/ReanimatedRexport";
+import * as _timing from "../../../design/animation/reanimated/timing/timing";
+import { intl, t } from "../../../intl/index.native";
+import { BackgroundBlurFill } from "../../../design/components/experimental/native";
+import { ArrowLargeLeftIcon } from "../../../design/components/Icon/native/redesign/generated/ArrowLargeLeftIcon";
+import { XLargeIcon } from "../../../design/components/Icon/native/redesign/generated/XLargeIcon";
+import AnalyticsUtils from "../../../utils/AnalyticsUtils";
+import MediaPlayerManager, { useMediaPlayerManagerStore } from "../../media/native/MediaPlayerManager";
+import { useShallow } from "../../../_bundle/Module3804";
+import MediaPlaybackPanelStateContext from "./MediaPlaybackPanelStateContext";
+import { PauseIcon } from "../../../design/components/Icon/native/redesign/generated/PauseIcon";
+import { PlayIcon } from "../../../design/components/Icon/native/redesign/generated/PlayIcon";
+import { AnimatedCircularProgress } from "../../../_bundle/Module14084";
+let useStyles, __initData, PiPControls;
+const MediaInfo = function MediaInfo(props) {
+  let state, setState, state2, setState2;
+  const { message, activeMediaPlayerSource: activeMediaPlayerSource3, isVoiceMessage: isVoiceMessage2, isControlVisible: isControlVisible2 } = props;
+  state = void 0;
+  setState = void 0;
+  state2 = void 0;
+  setState2 = void 0;
+  const styles = useStyles();
+  const token = useToken(Module712.colors.BACKGROUND_SURFACE_HIGH);
+  const stateFromStores3 = useStateFromStores([ChannelStore, UserStore, RelationshipStore], () => {
+    const channel = ChannelStore.getChannel(message?.channel_id);
+    return channel != null ? computeChannelName(channel, UserStore, RelationshipStore, true, true) : null;
+  }, [message]);
+  [state, setState] = useState(0);
+  [state2, setState2] = useState(0);
+  const memo = useMemo(() => state2 >= state, [state2, state]);
+  const r53 = message == null ? void 0 : message.getContentMessage();
+  if (message != null && r53 != null && activeMediaPlayerSource3 != null) {
+    const r74 = <Text variant="text-md/semibold" lineClamp={1} ellipsizeMode="clip" onLayout={(event) => setState2(event.nativeEvent.layout.width)}>
+      {isVoiceMessage2 ? message.author.username : r53.attachments.length > 0 ? activeMediaPlayerSource3.attachmentIndex != null ? getDisplayFilename(r53.attachments[activeMediaPlayerSource3.attachmentIndex]) : "" : ""}
+    </Text>;
+    return <View accessibilityElementsHidden={isControlVisible2} style={styles.infoContent} onLayout={(event) => setState(event.nativeEvent.layout.width)}>
+      <View style={styles.infoContainer}>
+        {memo ? <View style={{
+          flex: 1
+        }}>
+          <Marquee spacing={20} speed={0.2}>{r74}</Marquee>
+          <Module4611 start={{
+            x: 0,
+            y: 0
+          }} end={{
+            x: 1,
+            y: 0
+          }} locations={[0, 0.1, 0.2, 0.8, 0.9, 1]} colors={[token, token + "CC", token + "00", token + "00", token + "CC", token]} style={styles.infoContainerGradient} />
+        </View> : r74}
+        {stateFromStores3 != null && <Text variant="text-xs/medium" color="text-subtle" lineClamp={1}>{stateFromStores3}</Text>}
+      </View>
+    </View>;
+  }
+  return null;
+};
+PiPControls = function PiPControls(props) {
+  const { message: message2, handleClosePip, visible, isVoiceMessage: isVoiceMessage2 } = props;
+  const styles = useStyles();
+  const callback3 = useCallback(() => {
+    if (message2 != null && message2.channel_id != null && message2.id != null) {
+      MessageActionCreators.trackJump(message2.channel_id, message2.id, "Media PIP", {});
+      const channel = ChannelStore.getChannel(message2.channel_id);
+      safeTransitionTo_native(Routes.CHANNEL(channel == null ? void 0 : channel.getGuildId(), message2.channel_id, message2.id), {
+        navigationReplace: true,
+        openChannel: true
+      });
+    }
+  }, [message2]);
+  const c = function c() {
+    return {
+      opacity: _timing.withTiming(visible ? 1 : 0, {
+        duration: 200
+      })
+    };
+  };
+  c.__closure = {
+    withTiming: _timing.withTiming,
+    visible
+  };
+  c.__workletHash = 3641278982291;
+  c.__initData = __initData;
+  return <ReanimatedRexport.View style={[styles.pipControls, useAnimatedStyle(c)]}>
+    <BackgroundBlurFill blurAmount={0.05} />
+    <TouchableOpacity disabled={!visible} style={[styles.pipButton, styles.backButton]} onPress={callback3} accessible accessibilityRole="button" accessibilityLabel={isVoiceMessage2 ? intl.string(t.KTonHP) : intl.string(t["13/7kX"])}>
+      <ArrowLargeLeftIcon size="sm" />
+    </TouchableOpacity>
+    <TouchableOpacity disabled={!visible} style={[styles.pipButton, styles.dismissButton]} onPress={handleClosePip} accessible accessibilityRole="button" accessibilityLabel={isVoiceMessage2 ? intl.string(t["6rhrVG"]) : intl.string(t.WAI6xu)}>
+      <XLargeIcon size="sm" />
+    </TouchableOpacity>
+  </ReanimatedRexport.View>;
+};
+useStyles = createStyles({
+  container: {
+    justifyContent: "center",
+    alignItems: "center",
+    height: SquarePIPReferenceDimensions.height,
+    width: SquarePIPReferenceDimensions.width
+  },
+  pipControls: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 5
+  },
+  pipButton: {
+    position: "absolute",
+    top: 8,
+    padding: 8,
+    borderRadius: Module712.radii.round,
+    borderWidth: 1,
+    borderColor: Module712.colors.CONTROL_SECONDARY_BORDER_DEFAULT,
+    tintColor: Module712.colors.CONTROL_SECONDARY_TEXT_DEFAULT,
+    backgroundColor: Module712.colors.CONTROL_SECONDARY_BACKGROUND_DEFAULT,
+    ...Module712.shadows.SHADOW_LOW_HOVER
+  },
+  dismissButton: {
+    right: 8
+  },
+  backButton: {
+    left: 8
+  },
+  infoContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 8,
+    height: 34
+  },
+  infoContainerGradient: {
+    ...StyleSheet.absoluteFillObject
+  },
+  infoContent: {
+    justifyContent: "center",
+    alignItems: "center",
+    alignSelf: "stretch",
+    marginHorizontal: 4
+  },
+  actionContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 48,
+    height: 48,
+    zIndex: 100
+  },
+  playPauseButton: {
+    justifyContent: "center",
+    alignItems: "center",
+    width: 32,
+    height: 32,
+    zIndex: 100,
+    borderRadius: Module712.radii.round,
+    backgroundColor: Module712.colors.BACKGROUND_BRAND
+  },
+  progressBar: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: "center",
+    alignItems: "center"
+  }
+});
+__initData = {
+  code: "function MediaPlaybackPipTsx1(){const{withTiming,visible}=this.__closure;return{opacity:withTiming(visible?1:0,{duration:200})};}"
+};
+export default function MediaPlaybackPip() {
+  let isPlaying, activeMediaPlayerSource, closePip, stateFromStores, isVoiceMessage, state3, dismissPanel, callback, isControlVisible;
+  const styles = useStyles();
+  const ref2 = useRef(null);
+  const mediaPlayerManagerStore = useMediaPlayerManagerStore(useShallow((a0) => ({
+    isPlaying: a0.isPlaying,
+    progress: a0.progress,
+    activeMediaPlayerSource: a0.activeMediaPlayerSource,
+    mediaSourceMessage: a0.mediaSourceMessage,
+    closePip: a0.closePip
+  })));
+  isPlaying = mediaPlayerManagerStore.isPlaying;
+  const progress3 = mediaPlayerManagerStore.progress;
+  activeMediaPlayerSource = mediaPlayerManagerStore.activeMediaPlayerSource;
+  let mediaSourceMessage = mediaPlayerManagerStore.mediaSourceMessage;
+  closePip = mediaPlayerManagerStore.closePip;
+  const stateFromStores3 = useStateFromStores([MessageStore], () => {
+    const channelId = activeMediaPlayerSource?.channelId;
+    const messageId = activeMediaPlayerSource?.messageId;
+    return channelId == null ? null : messageId == null ? null : MessageStore.getMessage(channelId, messageId);
+  }, [activeMediaPlayerSource]);
+  if (stateFromStores3 != null) {
+    mediaSourceMessage = stateFromStores3;
+  }
+  stateFromStores = mediaSourceMessage;
+  const r5 = stateFromStores == null;
+  let r44 = void 0;
+  if (!r5) {
+    const contentMessage = stateFromStores.getContentMessage();
+    r44 = contentMessage == null ? void 0 : contentMessage.hasFlag(MessageFlags.IS_VOICE_MESSAGE);
+  }
+  let progress2, callback2;
+  isVoiceMessage = !!r44;
+  const activeMediaPlayerSource2 = activeMediaPlayerSource;
+  const progress = progress3;
+  const stateFromStores2 = stateFromStores;
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current == null && activeMediaPlayerSource2 != null && progress != null && stateFromStores2 != null) {
+      ref.current = {
+        initialProgress: progress,
+        activeMediaPlayerSource: activeMediaPlayerSource2,
+        message: stateFromStores2
+      };
+    }
+    if (ref.current != null && progress != null) {
+      ref.current.finalProgress = progress;
+    }
+  }, [progress, activeMediaPlayerSource, stateFromStores]);
+  useEffect(() => {
+    let c30944_0 = new Date();
+    return () => {
+      let current = ref.current;
+      if (current == null) {
+        current = {};
+      }
+      const { activeMediaPlayerSource: activeMediaPlayerSource3, message: message3, initialProgress, finalProgress } = current;
+      const r19 = activeMediaPlayerSource3?.attachmentIndex != null;
+      let r9 = null;
+      if (r19) {
+        const r20 = message3 == null;
+        let r21 = void 0;
+        if (!r20) {
+          const contentMessage = message3.getContentMessage();
+          r21 = contentMessage == null ? void 0 : contentMessage.attachments[activeMediaPlayerSource3.attachmentIndex];
+        }
+        r9 = r21;
+      }
+      const messageId = activeMediaPlayerSource3?.messageId;
+      const sender_user_id = message3 == null ? void 0 : message3.author.id;
+      const content_type = r9?.content_type;
+      const r33 = message3 == null;
+      let is_voice_message = void 0;
+      if (!r33) {
+        const contentMessage2 = message3.getContentMessage();
+        is_voice_message = contentMessage2 == null ? void 0 : contentMessage2.hasFlag(MessageFlags.IS_VOICE_MESSAGE);
+      }
+      const duration = finalProgress?.duration;
+      const total_duration_secs = duration != null ? duration / 1000 : void 0;
+      const time = initialProgress?.time;
+      const pip_playback_start_time_secs = time != null ? time / 1000 : void 0;
+      const time2 = finalProgress?.time;
+      AnalyticsUtils.track(AnalyticEvents.MEDIA_PIP_ENDED, {
+        message_id: messageId,
+        sender_user_id,
+        type: content_type,
+        is_voice_message,
+        total_duration_secs,
+        pip_playback_start_time_secs,
+        pip_playback_end_time_secs: time2 != null ? time2 / 1000 : void 0,
+        pip_opened_timestamp: c30944_0.toISOString(),
+        pip_closed_timestamp: new Date().toISOString()
+      });
+    };
+  }, []);
+  let [state, setState3] = useState(false);
+  state3 = state;
+  useEffect(() => {
+    let c28209_0;
+    if (state3) {
+      c28209_0 = setTimeout(() => {
+        if (isPlaying) {
+          setState3(false);
+        }
+      }, 3000);
+    }
+    return () => clearTimeout(c28209_0);
+  }, [state3, setState3, isPlaying]);
+  dismissPanel = useContext(MediaPlaybackPanelStateContext).dismissPanel;
+  callback = useCallback(() => {
+    dismissPanel();
+    closePip();
+    MediaPlayerManager.pauseCurrentPlayer();
+  }, [dismissPanel, closePip]);
+  progress2 = progress;
+  callback2 = callback;
+  useEffect(() => {
+    const isCompleted = progress2?.isCompleted;
+    let c30945_0;
+    if (isCompleted) {
+      c30945_0 = setTimeout(() => {
+        callback2();
+      }, 2000);
+    }
+    return () => {
+      clearTimeout(c30945_0);
+    };
+  }, [progress?.isCompleted, callback]);
+  if (!state3) {
+    state = progress?.isCompleted === true;
+  }
+  isControlVisible = state;
+  const callback3 = useCallback(() => {
+    if (isPlaying) {
+      MediaPlayerManager.pauseCurrentPlayer();
+      setState3(true);
+    } else {
+      MediaPlayerManager.playCurrentPlayer();
+    }
+  }, [isPlaying]);
+  const memo = useMemo(() => isPlaying ? <PauseIcon color={Module712.colors.WHITE} size="md" /> : <PlayIcon color={Module712.colors.WHITE} size="md" />, [isPlaying]);
+  const memo2 = useMemo(() => <MediaInfo message={stateFromStores} activeMediaPlayerSource={activeMediaPlayerSource} isVoiceMessage={isVoiceMessage} isControlVisible={isControlVisible} />, [stateFromStores, activeMediaPlayerSource, isVoiceMessage, isControlVisible]);
+  const memo3 = useMemo(() => <PiPControls message={stateFromStores} handleClosePip={callback} visible={isControlVisible} isVoiceMessage={isVoiceMessage} />, [stateFromStores, callback, isControlVisible, isVoiceMessage]);
+  let accessibilityLabel = isVoiceMessage ? intl.string(t.AlHqHT) : intl.string(t.RscU7I);
+  const r17 = isVoiceMessage ? intl.string(t["3XohGn"]) : intl.string(t.ZcgDJX);
+  const prefill = progress == null ? 0 : progress.time / progress.duration * 100;
+  const r26 = progress == null ? 0 : progress.duration - progress.time;
+  const props = {
+    style: styles.container,
+    activeOpacity: 1,
+    onPress: () => {
+      if (!(isPlaying ? !isPlaying : isControlVisible)) {
+        setState3(!state3);
+      }
+    },
+    accessible: false,
+    children: null
+  };
+  const children = [memo3, memo2, ,];
+  const r170 = [<AnimatedCircularProgress style={styles.progressBar} size={48} width={2} prefill={prefill} easing={Easing.out(Easing.linear)} duration={isPlaying ? r26 : 0} fill={isPlaying ? 100 : prefill} rotation={0} lineCap="round" ref={ref2} tintColor={useToken(Module712.colors.CONTROL_PRIMARY_BACKGROUND_DEFAULT)} backgroundColor={useToken(Module712.colors.BACKGROUND_MOD_MUTED)} />, ,];
+  if (isPlaying) {
+    accessibilityLabel = r17;
+  }
+  r170[1] = <TouchableOpacity style={styles.playPauseButton} onPress={callback3} accessibilityRole="button" accessibilityLabel={accessibilityLabel}>{memo}</TouchableOpacity>;
+  children[2] = <View style={styles.actionContainer}>{r170}</View>;
+  props.children = children;
+  return <TouchableOpacity {...props} />;
+};