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