214 lines
9.7 KiB
TypeScript
214 lines
9.7 KiB
TypeScript
// Metro module 14149 (f14150).
|
|
import * as Module19 from "react";
|
|
import { useState, useCallback, useContext, useLayoutEffect, useEffect, useMemo } from "react";
|
|
import { View, StyleSheet } from "react-native";
|
|
import { AnalyticEvents } from "../../../../Constants";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import VideoQuestModalContext, { useVideoQuestModalContext } from "./VideoQuestModalContext";
|
|
import { lockOrientation, restoreDefaultOrientation } from "../../../device/native/DeviceOrientation";
|
|
import { trackQuestEvent } from "../../lib/analytics/AnalyticsActions";
|
|
import { QuestDockGestureContext, QuestDockGestureContextProvider } from "../QuestDock/QuestDockGestureContext";
|
|
import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import * as _spring from "../../../../design/animation/reanimated/spring/spring";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
|
|
import QuestModalContentCloudBackground from "../QuestModalContentCloudBackground";
|
|
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
|
|
import VideoQuestModalContentInProgress from "./VideoQuestModalContentInProgress";
|
|
import VideoQuestModalContentCompleted from "./VideoQuestModalContentCompleted";
|
|
import { showQuestUnavailableAlert } from "../QuestUtils.native";
|
|
import { useNonNullableQuest } from "../../hooks/QuestHooks";
|
|
import { BillableAdPlacementImpressionTrackerNative } from "../QuestContentImpressionTracker.native";
|
|
import { QuestContent } from "../../QuestTypes";
|
|
import { Modal } from "../../../../design/components/Modal/native/Modal.native";
|
|
let initialRouteName;
|
|
const BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG = {
|
|
mass: 1.9,
|
|
damping: 18,
|
|
stiffness: 80,
|
|
overshootClamping: true
|
|
};
|
|
let c9903_10 = {
|
|
WATCH_VIDEO: 0,
|
|
0: "WATCH_VIDEO",
|
|
POST_WATCH_VIDEO: 1,
|
|
1: "POST_WATCH_VIDEO"
|
|
};
|
|
const useStyles = createStyles({
|
|
wrapper: {
|
|
flexDirection: "column",
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
zIndex: 1
|
|
},
|
|
contentWrapper: {
|
|
flex: 1
|
|
},
|
|
contentBackground: {
|
|
...StyleSheet.absoluteFillObject,
|
|
borderRadius: Module712.radii.lg,
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
modalContentWrapper: {
|
|
zIndex: 2
|
|
},
|
|
backgroundWrapper: {
|
|
...StyleSheet.absoluteFillObject,
|
|
borderRadius: Module712.radii.lg,
|
|
flex: 1,
|
|
overflow: "hidden",
|
|
pointerEvents: "none",
|
|
zIndex: 1
|
|
}
|
|
});
|
|
const __initData = {
|
|
code: "function VideoQuestModalTsx1(){const{withSpring,clamp,postWatchAnimationState,BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG,interpolate,CLOUDS_BACKGROUND_INVISIBLE_OFFSET_Y}=this.__closure;return{opacity:withSpring(clamp(postWatchAnimationState.get(),0,1),BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG),transform:[{translateY:withSpring(interpolate(postWatchAnimationState.get(),[0,1],[CLOUDS_BACKGROUND_INVISIBLE_OFFSET_Y,0]),BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)}]};}"
|
|
};
|
|
const __initData2 = {
|
|
code: "function VideoQuestModalTsx2(){const{withSpring,interpolate,postWatchAnimationState,safeAreaInsets,BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG}=this.__closure;return{transform:[{translateY:withSpring(interpolate(postWatchAnimationState.get(),[0,1],[safeAreaInsets.top,0]),BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)}],opacity:withSpring(postWatchAnimationState.get(),BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)};}"
|
|
};
|
|
let Component = Module19.memo(function({ onClose: onClose2, initialStep, sourceQuestContent }) {
|
|
let sharedValue, c20956_10;
|
|
const videoQuestModalContext = useVideoQuestModalContext();
|
|
const { quest, videoSessionId } = videoQuestModalContext;
|
|
const r36 = quest.userStatus?.completedAt != null;
|
|
let c20956_4 = r36;
|
|
const [state, setState] = useState(initialStep == null ? r36 ? c9903_10.POST_WATCH_VIDEO : c9903_10.WATCH_VIDEO : initialStep);
|
|
const [isFullscreen, setState2] = useState(false);
|
|
const callback = useCallback((a0) => {
|
|
if (a0) {
|
|
lockOrientation("LANDSCAPE", true);
|
|
} else {
|
|
lockOrientation("PORTRAIT", true);
|
|
}
|
|
setState2(a0);
|
|
trackQuestEvent({
|
|
questId: quest.id,
|
|
event: a0 ? AnalyticEvents.QUEST_VIDEO_FULLSCREEN_ENTERED : AnalyticEvents.QUEST_VIDEO_FULLSCREEN_EXITED,
|
|
properties: {
|
|
video_session_id: videoSessionId
|
|
},
|
|
sourceQuestContent
|
|
});
|
|
}, [quest.id, videoSessionId, sourceQuestContent]);
|
|
const windowDimensions = useContext(QuestDockGestureContext).windowDimensions;
|
|
const styles = useStyles();
|
|
const height = useStateFromSharedValue(windowDimensions).height;
|
|
useLayoutEffect(() => {
|
|
if (c20956_4 && initialStep == null) {
|
|
setState(c9903_10.POST_WATCH_VIDEO);
|
|
}
|
|
}, [r36, initialStep]);
|
|
const callback2 = useCallback(() => {
|
|
setState(c9903_10.WATCH_VIDEO);
|
|
}, []);
|
|
const callback3 = useCallback(() => {
|
|
callback(false);
|
|
setState(c9903_10.POST_WATCH_VIDEO);
|
|
}, [callback]);
|
|
sharedValue = useSharedValue(state === c9903_10.POST_WATCH_VIDEO ? 1 : 0);
|
|
const y = () => ({
|
|
opacity: _spring.withSpring(_ReanimatedRexport.clamp(sharedValue.get(), 0, 1), BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG),
|
|
transform: [{
|
|
translateY: _spring.withSpring(_ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [-100, 0]), BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)
|
|
}]
|
|
});
|
|
y.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
clamp: _ReanimatedRexport.clamp,
|
|
postWatchAnimationState: sharedValue,
|
|
BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG,
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
CLOUDS_BACKGROUND_INVISIBLE_OFFSET_Y: -100
|
|
};
|
|
y.__workletHash = 11571705142399;
|
|
y.__initData = __initData;
|
|
const animatedStyle2 = useAnimatedStyle(y);
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
c20956_10 = safeAreaInsets_native;
|
|
const M = () => ({
|
|
transform: [{
|
|
translateY: _spring.withSpring(_ReanimatedRexport.interpolate(sharedValue.get(), [0, 1], [c20956_10.top, 0]), BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)
|
|
}],
|
|
opacity: _spring.withSpring(sharedValue.get(), BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG)
|
|
});
|
|
M.__closure = {
|
|
withSpring: _spring.withSpring,
|
|
interpolate: _ReanimatedRexport.interpolate,
|
|
postWatchAnimationState: sharedValue,
|
|
safeAreaInsets: safeAreaInsets_native,
|
|
BACKGROUND_ENTRANCE_ANIMATION_SPRING_CONFIG
|
|
};
|
|
M.__workletHash = 9769051401109;
|
|
M.__initData = __initData2;
|
|
const animatedStyle = useAnimatedStyle(M);
|
|
useEffect(() => {
|
|
sharedValue.set(state === c9903_10.POST_WATCH_VIDEO ? 1 : 0);
|
|
}, [sharedValue, state]);
|
|
return <View>
|
|
<ReanimatedNativeView style={styles.modalContentWrapper}>
|
|
<View style={[styles.backgroundWrapper, {
|
|
height
|
|
}]}>
|
|
<ReanimatedNativeView style={[styles.contentBackground, {
|
|
top: safeAreaInsets_native.top
|
|
}]} />
|
|
<ReanimatedNativeView style={[styles.contentBackground, animatedStyle]} />
|
|
<ReanimatedNativeView style={animatedStyle2}>
|
|
<QuestModalContentCloudBackground align="top" />
|
|
</ReanimatedNativeView>
|
|
</View>
|
|
<SafeAreaPaddingView top style={[styles.wrapper, {
|
|
height
|
|
}]}>
|
|
<View style={styles.contentWrapper}>
|
|
{state === c9903_10.WATCH_VIDEO && <VideoQuestModalContentInProgress isFullscreen={isFullscreen} onNavigateToPostWatchVideo={callback3} onClose={onClose2} onEnd={callback3} setIsFullscreen={callback} sourceQuestContent={sourceQuestContent} />}
|
|
{state === c9903_10.POST_WATCH_VIDEO && <VideoQuestModalContentCompleted onClose={onClose2} onRestartVideo={callback2} sourceQuestContent={sourceQuestContent} />}
|
|
</View>
|
|
</SafeAreaPaddingView>
|
|
</ReanimatedNativeView>
|
|
</View>;
|
|
});
|
|
initialRouteName = "watch_mobile_video_quest";
|
|
const r73 = Module19.memo(function VideoQuestModal(props) {
|
|
const { questId, questContentPosition, onClose, videoSessionId: videoSessionId2, initialStep: initialStep2, sourceQuestContent: sourceQuestContent2 } = props;
|
|
const nonNullableQuest = useNonNullableQuest(questId, useCallback(() => {
|
|
showQuestUnavailableAlert();
|
|
onClose();
|
|
}, [onClose]));
|
|
const memo = useMemo(() => {
|
|
let r1 = null;
|
|
if (nonNullableQuest != null) {
|
|
const r7 = {};
|
|
r7[initialRouteName] = {
|
|
fullscreen: true,
|
|
headerLeft: () => null,
|
|
render: () => <VideoQuestModalContext.Provider value={{
|
|
quest: nonNullableQuest,
|
|
videoSessionId: videoSessionId2
|
|
}}>
|
|
<QuestDockGestureContextProvider>
|
|
<BillableAdPlacementImpressionTrackerNative overrideVisibility questContent={QuestContent.VIDEO_MODAL_MOBILE} questOrQuests={nonNullableQuest} questContentPosition={questContentPosition} sourceQuestContent={sourceQuestContent2}>
|
|
{function children() {
|
|
return <Component initialStep={initialStep2} onClose={onClose} sourceQuestContent={sourceQuestContent2} />;
|
|
}}
|
|
</BillableAdPlacementImpressionTrackerNative>
|
|
</QuestDockGestureContextProvider>
|
|
</VideoQuestModalContext.Provider>
|
|
};
|
|
r1 = r7;
|
|
}
|
|
return r1;
|
|
}, [onClose, nonNullableQuest, videoSessionId2, questContentPosition, initialStep2, sourceQuestContent2]);
|
|
useLayoutEffect(() => {
|
|
lockOrientation("PORTRAIT", true);
|
|
return restoreDefaultOrientation;
|
|
}, []);
|
|
return nonNullableQuest == null ? null : memo == null ? null : <Modal hideTitle initialRouteName={initialRouteName} screens={memo} />;
|
|
});
|
|
export default r73;
|
|
export { c9903_10 as VideoQuestModalSteps };
|