341 lines
16 KiB
TypeScript
341 lines
16 KiB
TypeScript
// 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>;
|
|
};
|