545 lines
26 KiB
TypeScript
545 lines
26 KiB
TypeScript
// Metro module 14154 (f14155).
|
|
import * as Module19 from "react";
|
|
import { useMemo, useContext, useState, useCallback, useEffect, forwardRef } from "react";
|
|
import { ScrollView, StyleSheet, View } from "react-native";
|
|
import { QuestsExperimentLocations } from "../../QuestConstants";
|
|
import { ThemeTypes } from "../../../../_bundle/Module505";
|
|
import Module689 from "../../../../_bundle/Module689";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import QuestProgressIndicator, { QUEST_PROGRESS_DIAMETER_BY_SIZE } from "../QuestProgressIndicator";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { isAndroid } from "../../../../utils/PlatformUtils";
|
|
import { getQuestAsset, QuestAssetType } from "../../lib/AssetUtils";
|
|
import { VideoQuestPlayerRefactorExperiment } from "../../experiments/index";
|
|
import { VideoQuestPlayer } from "./VideoQuestPlayerRefactor";
|
|
import * as _VideoQuestPlayer from "./VideoQuestPlayer";
|
|
import { QuestDockGestureContext } from "../QuestDock/QuestDockGestureContext";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import { useSharedValue, useDerivedValue, useAnimatedStyle, useAnimatedProps } from "../../../reanimated/ReanimatedRexport";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import useSafeAreaInsets_native from "../../../safe_area/useSafeAreaInsets.native";
|
|
import { SafeAreaPaddingView } from "../../../../components_native/common/SafeAreaView";
|
|
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
|
|
import VideoQuestModalCloseButton from "./VideoQuestModalCloseButton";
|
|
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
|
|
import VideoQuestModalReward from "./VideoQuestModalReward";
|
|
import QuestModalContentCloudBackground from "../QuestModalContentCloudBackground";
|
|
import QuestGameLogotype from "../QuestGameLogotype";
|
|
import { Stack } from "../../../../design/components/Stack/native/Stack.native";
|
|
import { PressableOpacity } from "../../../../design/void/Pressables/native/Pressables";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import QuestContextMenu from "../QuestContextMenu";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import { Button } from "../../../../design/components/Button/native/Button.native";
|
|
import { getExternalCtaLabel, getQuestUrl } from "../../utils/QuestCopyUtils";
|
|
import { IconButton } from "../../../../design/components/Button/native/IconButton.native";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import Module12238 from "../../../../_bundle/Module12238";
|
|
import Module10195 from "../../../../_bundle/Module10195";
|
|
import { useQuestTaskDetails } from "../../hooks/QuestHooks";
|
|
import { getVideoQuestProgressRemainingAccessibilityLabel, getVideoOrientation } from "../../utils/VideoQuestUtils";
|
|
import Module4611 from "../../../../_bundle/Module4611";
|
|
import VideoQuestModalHeader from "./VideoQuestModalHeader";
|
|
import { ArrowSmallRightIcon } from "../../../../design/components/Icon/native/redesign/generated/ArrowSmallRightIcon";
|
|
import { TranscriptOutlineIcon } from "../../../../design/components/Icon/native/redesign/generated/TranscriptOutlineIcon";
|
|
import { ClosedCaptionsOutlineIcon } from "../../../../design/components/Icon/native/redesign/generated/ClosedCaptionsOutlineIcon";
|
|
import { ShareIcon } from "../../../../design/components/Icon/native/redesign/generated/ShareIcon";
|
|
import { MoreHorizontalIcon } from "../../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
|
|
import { useVideoQuestModalContext } from "./VideoQuestModalContext";
|
|
import ActionSheetActionCreators from "../../../action_sheet/native/ActionSheetActionCreators";
|
|
import { useGetQuestImpressionId } from "../../lib/analytics/ContentImpressionTrackerHooks";
|
|
import * as _QuestUtils from "../../utils/QuestUtils";
|
|
import { shouldMigrateToAdAnalyticsInterface, AdAnalyticsInterfaceExperimentStep } from "../../experiments/AdAnalyticsInterfaceExperiment";
|
|
import { captureAdUserAction } from "../../../ads/analytics/captureAdUserAction";
|
|
import { AdUserActionType } from "../../../ads/analytics/captureAdUserActionTypes";
|
|
import { AdCreativeType } from "../../../../_bundle/Module6013";
|
|
import { QuestContentCTA } from "../../lib/analytics/AnalyticsTypes";
|
|
import { QuestContent } from "../../QuestTypes";
|
|
import { trackQuestContentClicked } from "../../lib/analytics/AnalyticsActions";
|
|
import { showShareActionSheet } from "../../../action_sheet/native/showShareActionSheet";
|
|
import { useVideoQuestClickCtaAndMaybeCloseModal } from "./useVideoQuestClickCtaAndMaybeCloseModal";
|
|
import { openRewardDetailsBottomSheet } from "../QuestUtils.native";
|
|
import { useVideoExternallyPaused } from "./hooks/useVideoExternallyPaused";
|
|
import { FirstPartyQuestTaskTypes } from "../../../../_bundle/Module5040";
|
|
let __initData, __initData2, __initData3, __initData4, Component3, Component2, useStyles2, FooterButton;
|
|
const start = {
|
|
x: 0,
|
|
y: 0
|
|
};
|
|
const end = {
|
|
x: 0,
|
|
y: 1
|
|
};
|
|
const colors = [Module689(Module712.unsafe_rawColors.PLUM_23).alpha(0.4).hex(), Module689(Module712.unsafe_rawColors.PLUM_23).alpha(0).hex()];
|
|
const colors2 = [Module689(Module712.unsafe_rawColors.PLUM_23).alpha(0).hex(), Module689(Module712.unsafe_rawColors.PLUM_23).alpha(0.4).hex()];
|
|
const contentInsets = {
|
|
bottom: 158,
|
|
top: 64,
|
|
left: 16,
|
|
right: 16
|
|
};
|
|
const contentInsets2 = {
|
|
bottom: 16,
|
|
left: 16,
|
|
right: 16
|
|
};
|
|
const useStyles = createStyles((a0) => ({
|
|
wrapper: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST,
|
|
flex: 1
|
|
},
|
|
wrapperPortrait: {
|
|
borderTopLeftRadius: Module712.radii.lg,
|
|
borderTopRightRadius: Module712.radii.lg,
|
|
justifyContent: a0 ? "flex-start" : "center"
|
|
},
|
|
videoLandscape: {
|
|
width: "100%",
|
|
position: "relative"
|
|
},
|
|
videoLandscape9by16: {
|
|
aspectRatio: 1.7777777777777777,
|
|
flexShrink: 0
|
|
},
|
|
landscapeContentScroll: {
|
|
flex: 1
|
|
},
|
|
landscapeContentScrollContent: {
|
|
flexGrow: 1
|
|
},
|
|
videoLandscapeFullscreen: {
|
|
flexGrow: 1,
|
|
flexShrink: 1
|
|
},
|
|
videoWrapper: {
|
|
borderRadius: Module712.radii.lg,
|
|
flexGrow: 0,
|
|
flexShrink: 0,
|
|
overflow: "hidden"
|
|
},
|
|
videoWrapperLandscape: {
|
|
flexGrow: 1,
|
|
borderTopLeftRadius: Module712.radii.none,
|
|
borderTopRightRadius: Module712.radii.none
|
|
},
|
|
videoWrapperFullscreen: {
|
|
borderRadius: Module712.radii.none
|
|
},
|
|
videoContentWrapper: {
|
|
flexDirection: "column",
|
|
pointerEvents: "box-none",
|
|
flexGrow: 1,
|
|
flexShrink: 0,
|
|
justifyContent: "space-between",
|
|
padding: Module712.space.PX_16
|
|
},
|
|
videoContentWrapperLandscape: {
|
|
padding: 0
|
|
},
|
|
videoContentWrapperPortrait: {
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
rewardContainer: {
|
|
justifyContent: "center",
|
|
flexGrow: 1,
|
|
flexShrink: 0
|
|
},
|
|
rewardContentCentered: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_16,
|
|
left: Module712.space.PX_16,
|
|
right: Module712.space.PX_16,
|
|
bottom: Module712.space.PX_16,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
modalBackground: {
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWEST
|
|
},
|
|
questDetailsLandscape: {
|
|
borderTopWidth: 1,
|
|
borderColor: Module712.colors.BACKGROUND_MOD_STRONG,
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingTop: Module712.space.PX_24
|
|
},
|
|
questDetailsPrimary: {
|
|
flexGrow: 0,
|
|
flexShrink: 1
|
|
},
|
|
questDetailsSecondary: {
|
|
flexGrow: 0,
|
|
flexShrink: 0
|
|
},
|
|
footer: {
|
|
paddingHorizontal: Module712.space.PX_16,
|
|
paddingVertical: Module712.space.PX_8
|
|
},
|
|
icon: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_ACTIVE
|
|
},
|
|
iconDisabled: {
|
|
color: Module712.colors.INTERACTIVE_TEXT_DEFAULT
|
|
},
|
|
closeButtonLandscape: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_16,
|
|
left: Module712.space.PX_16
|
|
},
|
|
gradientTop: {
|
|
...StyleSheet.absoluteFillObject,
|
|
bottom: void 0,
|
|
height: 70
|
|
},
|
|
gradientBottom: {
|
|
...StyleSheet.absoluteFillObject,
|
|
top: void 0,
|
|
height: 150
|
|
},
|
|
textShadow: {
|
|
margin: -15,
|
|
padding: 15,
|
|
textShadowColor: Module712.colors.BLACK,
|
|
textShadowOffset: {
|
|
width: 0,
|
|
height: 0
|
|
},
|
|
textShadowRadius: 15
|
|
},
|
|
viewRewardBtn: {
|
|
marginRight: "auto"
|
|
},
|
|
playerThumbnail: {
|
|
borderRadius: Module712.radii.lg,
|
|
height: 96,
|
|
width: "100%"
|
|
},
|
|
cloudsBackground: {
|
|
zIndex: -1
|
|
},
|
|
questDetailsSubheader: {
|
|
opacity: 0.6
|
|
}
|
|
}));
|
|
__initData = {
|
|
code: "function VideoQuestModalContentInProgressTsx1(){const{withDelay,LOGO_REWARD_TRANSITION_DELAY_MS,withTiming,isComponentMounted,LOGO_REWARD_TRANSITION_DURATION_MS}=this.__closure;return withDelay(LOGO_REWARD_TRANSITION_DELAY_MS,withTiming(isComponentMounted.get(),{duration:LOGO_REWARD_TRANSITION_DURATION_MS}));}"
|
|
};
|
|
__initData2 = {
|
|
code: "function VideoQuestModalContentInProgressTsx2(){const{animation}=this.__closure;return{opacity:animation.get()};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function VideoQuestModalContentInProgressTsx3(){const{animation}=this.__closure;return{opacity:1-animation.get()};}"
|
|
};
|
|
__initData4 = {
|
|
code: "function VideoQuestModalContentInProgressTsx4(){const{animation}=this.__closure;return{pointerEvents:animation.get()>0.3?'auto':'none'};}"
|
|
};
|
|
Component3 = Module19.memo(function(a0) {
|
|
let setState, setState2, sharedValue, derivedValue;
|
|
const { quest, captionsEnabled, handleClose, handlePrimaryCtaPress, handleShareQuest, handleOpenTranscript, handleToggleCaptions, isFullscreen, onNavigateToPostWatchVideo, onEnd, setIsFullscreen, externallyPaused, sourceQuestContent: sourceQuestContent2, hasCaptionAsset, hasTranscriptAsset } = a0;
|
|
let isShareable = a0.isShareable;
|
|
setState = void 0;
|
|
setState2 = void 0;
|
|
sharedValue = void 0;
|
|
derivedValue = void 0;
|
|
const styles = useStyles(isAndroid());
|
|
const memo2 = useMemo(() => getQuestAsset(quest, QuestAssetType.HERO), [quest]);
|
|
let r24 = quest.userStatus?.completedAt != null;
|
|
const Component = VideoQuestPlayerRefactorExperiment.useConfig({
|
|
location: QuestsExperimentLocations.VIDEO_MODAL_MOBILE
|
|
}).enabled ? VideoQuestPlayer : _VideoQuestPlayer.VideoQuestPlayer;
|
|
const windowDimensions2 = useContext(QuestDockGestureContext).windowDimensions;
|
|
let state;
|
|
[state, setState] = useState(null);
|
|
const callback = useCallback((a0) => {
|
|
setState(a0.nativeEvent.layout.height);
|
|
}, []);
|
|
let state2;
|
|
[state2, setState2] = useState(null);
|
|
const callback2 = useCallback((a0) => {
|
|
setState2(Module712.space.PX_24 + a0.nativeEvent.layout.height);
|
|
}, []);
|
|
const r90 = state != null ? state - 2 * Module712.space.PX_16 : null;
|
|
let r96 = "md";
|
|
let size = "md";
|
|
if (r90 != null) {
|
|
const r97 = state2 == null;
|
|
size = "md";
|
|
if (!r97) {
|
|
const r102 = QUEST_PROGRESS_DIAMETER_BY_SIZE.lg + state2;
|
|
let r103 = "lg";
|
|
if (!(r90 >= r102)) {
|
|
if (r90 >= QUEST_PROGRESS_DIAMETER_BY_SIZE["md-lg"] + state2) {
|
|
r96 = "md-lg";
|
|
}
|
|
r103 = r96;
|
|
}
|
|
size = r103;
|
|
}
|
|
}
|
|
const md = QUEST_PROGRESS_DIAMETER_BY_SIZE.md;
|
|
if (state2 == null) {
|
|
state2 = 0;
|
|
}
|
|
const minHeight = md + state2 + 2 * Module712.space.PX_16;
|
|
sharedValue = useSharedValue(0);
|
|
useEffect(() => {
|
|
sharedValue.set(1);
|
|
}, [sharedValue]);
|
|
const te = function te() {
|
|
return _ReanimatedRexport.withDelay(3000, _timing.withTiming(sharedValue.get(), {
|
|
duration: 1000
|
|
}));
|
|
};
|
|
te.__closure = {
|
|
withDelay: _ReanimatedRexport.withDelay,
|
|
LOGO_REWARD_TRANSITION_DELAY_MS: 3000,
|
|
withTiming: _timing.withTiming,
|
|
isComponentMounted: sharedValue,
|
|
LOGO_REWARD_TRANSITION_DURATION_MS: 1000
|
|
};
|
|
te.__workletHash = 12561024953493;
|
|
te.__initData = __initData;
|
|
derivedValue = useDerivedValue(te);
|
|
const ne = () => ({
|
|
opacity: derivedValue.get()
|
|
});
|
|
ne.__closure = {
|
|
animation: derivedValue
|
|
};
|
|
ne.__workletHash = 17463485679217;
|
|
ne.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(ne);
|
|
const oe = () => ({
|
|
opacity: 1 - derivedValue.get()
|
|
});
|
|
oe.__closure = {
|
|
animation: derivedValue
|
|
};
|
|
oe.__workletHash = 9103187579788;
|
|
oe.__initData = __initData3;
|
|
const animatedStyle = useAnimatedStyle(oe);
|
|
const se = () => ({
|
|
pointerEvents: derivedValue.get() > 0.3 ? "auto" : "none"
|
|
});
|
|
se.__closure = {
|
|
animation: derivedValue
|
|
};
|
|
se.__workletHash = 11833431315705;
|
|
se.__initData = __initData4;
|
|
const animatedProps = useAnimatedProps(se);
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
const callback3 = useCallback(({ orientation }) => {
|
|
let r6 = isFullscreen;
|
|
if (!isFullscreen) {
|
|
r6 = orientation !== "landscape";
|
|
}
|
|
setIsFullscreen((r6 ? "PORTRAIT" : "LANDSCAPE") === "LANDSCAPE");
|
|
}, [isFullscreen, setIsFullscreen]);
|
|
const style = [styles.videoWrapper, styles.videoWrapperLandscape, isFullscreen ? styles.videoWrapperFullscreen : isFullscreen];
|
|
const r203 = [<ThemeContextProvider theme={ThemeTypes.DARKER}>
|
|
<Component captionsEnabled={captionsEnabled} orientation="landscape" style={[styles.videoLandscape, isFullscreen ? !isFullscreen : styles.videoLandscape9by16, isFullscreen ? styles.videoLandscapeFullscreen : isFullscreen]} contentInsets={contentInsets2} handleOpenTranscript={handleOpenTranscript} handleToggleCaptions={handleToggleCaptions} isFullscreen={isFullscreen} externallyPaused={externallyPaused} onEnd={onEnd} onToggleFullscreen={callback3} sourceQuestContent={sourceQuestContent2} hasCaptionAsset={hasCaptionAsset} hasTranscriptAsset={hasTranscriptAsset} />
|
|
<VideoQuestModalCloseButton onClose={handleClose} style={[styles.closeButtonLandscape, (isFullscreen ? safeAreaInsets_native != null : isFullscreen) && {
|
|
left: safeAreaInsets_native.left
|
|
}]} />
|
|
</ThemeContextProvider>, ,];
|
|
let r204 = !isFullscreen;
|
|
if (!isFullscreen) {
|
|
const r267 = [<View style={[styles.rewardContainer, {
|
|
minHeight
|
|
}]} onLayout={callback}>
|
|
<ReanimatedNativeView style={[styles.rewardContentCentered, animatedStyle2]} animatedProps={animatedProps}>
|
|
<VideoQuestModalReward size={size} onTextBlockLayout={callback2} />
|
|
</ReanimatedNativeView>
|
|
<ReanimatedNativeView style={[styles.rewardContentCentered, isAndroid() && styles.modalBackground, animatedStyle]} pointerEvents="none">
|
|
{isAndroid() && <QuestModalContentCloudBackground align="top" style={styles.cloudsBackground} />}
|
|
<QuestGameLogotype assetUrl={getQuestAsset(quest, QuestAssetType.LOGO_TYPE, "dark").url} maxHeight={90} maxWidth={windowDimensions2.get().width - 120} />
|
|
</ReanimatedNativeView>
|
|
</View>, <QuestModalContentCloudBackground align="top" style={styles.cloudsBackground} />, ,];
|
|
const r323 = [<Stack direction="horizontal" justify="space-between" spacing={Module712.space.PX_8}>
|
|
<PressableOpacity style={styles.questDetailsPrimary} onPress={handlePrimaryCtaPress}>
|
|
<Text variant="heading-lg/semibold" color="mobile-text-heading-primary" accessibilityRole="header">{quest.config.messages.gameTitle}</Text>
|
|
<Text variant="heading-sm/semibold" color="text-subtle">{quest.config.messages.gamePublisher}</Text>
|
|
</PressableOpacity>
|
|
<View style={styles.questDetailsSecondary}>
|
|
<QuestContextMenu quest={quest} location={QuestsExperimentLocations.VIDEO_MODAL_MOBILE} sourceQuestContent={sourceQuestContent2} />
|
|
</View>
|
|
</Stack>, memo2 != null && <PressableOpacity onPress={handlePrimaryCtaPress}>
|
|
<FastImage source={{
|
|
uri: memo2.url
|
|
}} style={styles.playerThumbnail} />
|
|
</PressableOpacity>, ,];
|
|
const r353 = [<Button grow variant="expressive" onPress={handlePrimaryCtaPress} text={getExternalCtaLabel(quest)} />, , ,];
|
|
if (isShareable) {
|
|
isShareable = <IconButton accessibilityLabel={intl.string(t.Ej3B3Y)} icon={Module12238} onPress={handleShareQuest} variant="secondary" />;
|
|
}
|
|
r353[1] = isShareable;
|
|
if (r24) {
|
|
r24 = <IconButton accessibilityLabel={intl.string(t.cfY4PE)} icon={Module10195} onPress={onNavigateToPostWatchVideo} variant="secondary" />;
|
|
}
|
|
r353[2] = r24;
|
|
r323[2] = <Stack direction="horizontal" spacing={Module712.space.PX_16}>{r353}</Stack>;
|
|
r267[2] = <Stack direction="vertical" spacing={Module712.space.PX_24} style={styles.questDetailsLandscape}>{r323}</Stack>;
|
|
r204 = <ScrollView style={styles.landscapeContentScroll} contentContainerStyle={styles.landscapeContentScrollContent} showsVerticalScrollIndicator={false} alwaysBounceVertical={false}>
|
|
<View style={[styles.videoContentWrapper, styles.videoContentWrapperLandscape]}>{r267}</View>
|
|
</ScrollView>;
|
|
}
|
|
r203[1] = r204;
|
|
return <SafeAreaPaddingView bottom style={styles.wrapper}>
|
|
<View style={style}>{r203}</View>
|
|
</SafeAreaPaddingView>;
|
|
});
|
|
Component2 = Module19.memo(function(a0) {
|
|
let c20959_2, state, setState3;
|
|
const { quest: quest3, captionsEnabled, handleClose, handlePrimaryCtaPress, handleRewardDetailsPress, handleShareQuest, handleOpenTranscript, handleToggleCaptions, isFullscreen: isFullscreen2, onNavigateToPostWatchVideo, onEnd, externallyPaused, sourceQuestContent: sourceQuestContent2 } = a0;
|
|
let hasCaptionAsset = a0.hasCaptionAsset;
|
|
let hasTranscriptAsset = a0.hasTranscriptAsset;
|
|
let isShareable = a0.isShareable;
|
|
c20959_2 = void 0;
|
|
state = void 0;
|
|
setState3 = void 0;
|
|
const questTaskDetails = useQuestTaskDetails(quest3);
|
|
const r50 = quest3.userStatus?.completedAt != null;
|
|
const videoQuestProgressRemainingAccessibilityLabel = getVideoQuestProgressRemainingAccessibilityLabel(questTaskDetails, r50);
|
|
const Component = VideoQuestPlayerRefactorExperiment.useConfig({
|
|
location: QuestsExperimentLocations.VIDEO_MODAL_MOBILE
|
|
}).enabled ? VideoQuestPlayer : _VideoQuestPlayer.VideoQuestPlayer;
|
|
const windowDimensions = useContext(QuestDockGestureContext).windowDimensions;
|
|
const memo = useMemo(() => Math.floor(windowDimensions.get().width / 0.5625), [windowDimensions]);
|
|
const callback = useCallback(() => {}, []);
|
|
const safeAreaInsets_native = useSafeAreaInsets_native();
|
|
c20959_2 = safeAreaInsets_native;
|
|
[state, setState3] = useState(64);
|
|
const callback2 = useCallback((a0) => {
|
|
setState3(a0.nativeEvent.layout.height);
|
|
}, []);
|
|
const memo2 = useMemo(() => {
|
|
const r3 = Math;
|
|
const height = windowDimensions.get().height;
|
|
return r3.min(height - c20959_2.top - c20959_2.bottom - state, memo);
|
|
}, [memo, state, windowDimensions, safeAreaInsets_native]);
|
|
const styles = useStyles(windowDimensions.get().height - memo2 - state < 200);
|
|
const style = [styles.videoWrapper, memo2 == null ? {
|
|
flexGrow: 1
|
|
} : {
|
|
height: memo2
|
|
}];
|
|
const r211 = [<View style={style}>
|
|
<ThemeContextProvider theme={ThemeTypes.DARKER}>
|
|
<Component captionsEnabled={captionsEnabled} onLoad={callback} externallyPaused={externallyPaused} orientation="portrait" contentInsets={contentInsets} handleOpenTranscript={handleOpenTranscript} handleToggleCaptions={handleToggleCaptions} isFullscreen={isFullscreen2} onEnd={onEnd} sourceQuestContent={sourceQuestContent2} hasCaptionAsset={hasCaptionAsset} hasTranscriptAsset={hasTranscriptAsset} />
|
|
</ThemeContextProvider>
|
|
<Module4611 start={start} end={end} style={styles.gradientTop} colors={colors} />
|
|
<Module4611 start={start} end={end} style={styles.gradientBottom} colors={colors2} />
|
|
<View style={[styles.videoContentWrapper, styles.videoContentWrapperPortrait]}>
|
|
<VideoQuestModalHeader closeButtonIconColor={Module712.colors.WHITE} onClose={handleClose} showCurrentVideoTime withTextShadow />
|
|
<Stack direction="vertical" spacing={Module712.space.PX_24}>
|
|
<Stack direction="horizontal" justify="space-between" spacing={Module712.space.PX_8}>
|
|
<PressableOpacity style={styles.questDetailsPrimary} onPress={handlePrimaryCtaPress}>
|
|
<Text variant="heading-lg/semibold" color="text-overlay-light" style={styles.textShadow} accessibilityRole="header">{quest3.config.messages.gameTitle}</Text>
|
|
<Text variant="heading-sm/semibold" color="text-overlay-light" style={[styles.textShadow, styles.questDetailsSubheader]}>{quest3.config.messages.gamePublisher}</Text>
|
|
</PressableOpacity>
|
|
<View style={styles.questDetailsSecondary}>
|
|
<QuestProgressIndicator quest={quest3} size="x-sm" progress={questTaskDetails.percentComplete} hasConfetti onPress={handleRewardDetailsPress} accessibilityLabel={videoQuestProgressRemainingAccessibilityLabel} />
|
|
</View>
|
|
</Stack>
|
|
<Button grow variant="expressive" onPress={handlePrimaryCtaPress} text={getExternalCtaLabel(quest3)} />
|
|
</Stack>
|
|
</View>
|
|
</View>, ,];
|
|
const r243 = [r50 && <View style={styles.viewRewardBtn}>
|
|
<Button icon={<ArrowSmallRightIcon size="sm" />} iconPosition="end" onPress={onNavigateToPostWatchVideo} variant="secondary" size="sm" text={intl.string(t["jyYgZ+"])} />
|
|
</View>, , , , ,];
|
|
if (hasTranscriptAsset) {
|
|
hasTranscriptAsset = <FooterButton accessibilityLabel={intl.string(t.KCzjTi)} onPress={handleOpenTranscript}>
|
|
<TranscriptOutlineIcon color={styles.iconDisabled.color} />
|
|
</FooterButton>;
|
|
}
|
|
r243[1] = hasTranscriptAsset;
|
|
if (hasCaptionAsset) {
|
|
hasCaptionAsset = <FooterButton accessibilityLabel={intl.string(t.bDSZO1)} onPress={handleToggleCaptions}>
|
|
<ClosedCaptionsOutlineIcon color={captionsEnabled ? styles.icon.color : styles.iconDisabled.color} />
|
|
</FooterButton>;
|
|
}
|
|
r243[2] = hasCaptionAsset;
|
|
if (isShareable) {
|
|
isShareable = <FooterButton accessibilityLabel={intl.string(t.Ej3B3Y)} onPress={handleShareQuest}>
|
|
<ShareIcon color={Module712.colors.TEXT_DEFAULT} />
|
|
</FooterButton>;
|
|
}
|
|
r243[3] = isShareable;
|
|
r243[4] = <QuestContextMenu quest={quest3} location={QuestsExperimentLocations.VIDEO_MODAL_MOBILE} sourceQuestContent={sourceQuestContent2}>
|
|
{function children({ ref, ...props }) {
|
|
return <FooterButton accessibilityLabel={intl.string(t.PdRCRg)} ref={ref} {...props}>
|
|
<MoreHorizontalIcon color={Module712.colors.TEXT_DEFAULT} />
|
|
</FooterButton>;
|
|
}}
|
|
</QuestContextMenu>;
|
|
r211[1] = <Stack direction="horizontal" justify="flex-end" align="center" style={styles.footer} spacing={Module712.space.PX_4} onLayout={callback2}>{r243}</Stack>;
|
|
return <SafeAreaPaddingView bottom style={[styles.wrapper, styles.wrapperPortrait]}>{r211}</SafeAreaPaddingView>;
|
|
});
|
|
useStyles2 = createStyles({
|
|
footerButton: {
|
|
padding: Module712.space.PX_8
|
|
}
|
|
});
|
|
FooterButton = forwardRef(function FooterButton(props, a1) {
|
|
return <PressableOpacity accessibilityRole="button" style={useStyles2().footerButton} {...props} ref={a1} />;
|
|
});
|
|
const r114 = Module19.memo(function VideoQuestModalContentInProgress(props) {
|
|
let getQuestImpressionId, isShareableQuest;
|
|
const { isFullscreen: isFullscreen2, onClose, onNavigateToPostWatchVideo, onEnd, setIsFullscreen: setIsFullscreen2, sourceQuestContent } = props;
|
|
const quest2 = useVideoQuestModalContext().quest;
|
|
const memo2 = useMemo(() => getQuestAsset(quest2, QuestAssetType.VIDEO_PLAYER_CAPTION, void 0, true), [quest2]);
|
|
const memo3 = useMemo(() => getQuestAsset(quest2, QuestAssetType.VIDEO_PLAYER_TRANSCRIPT, void 0, true), [quest2]);
|
|
let [captionsEnabled, setState4] = useState(false);
|
|
const callback = useCallback(() => setState4((prevState4) => !prevState4), []);
|
|
const callback2 = useCallback(() => {
|
|
ActionSheetActionCreators.openLazy(import("./VideoQuestTranscriptActionSheet"), `transcript-${quest2.id}`, {
|
|
quest: quest2
|
|
});
|
|
}, [quest2]);
|
|
getQuestImpressionId = useGetQuestImpressionId();
|
|
const [state, setState5] = useState(false);
|
|
isShareableQuest = _QuestUtils.isShareableQuest(quest2.config);
|
|
const callback3 = useCallback(() => {
|
|
if (isShareableQuest) {
|
|
if (shouldMigrateToAdAnalyticsInterface(AdAnalyticsInterfaceExperimentStep.STEP_2_CLICKED_INTERNAL, "video_quest_modal_in_progress")) {
|
|
captureAdUserAction({
|
|
type: AdUserActionType.CLICK_INTERNAL,
|
|
adCreativeType: AdCreativeType.QUEST,
|
|
adCreativeId: quest2.id,
|
|
questContentCTA: QuestContentCTA.MOBILE_SHARESHEET,
|
|
surfaceId: QuestContent.VIDEO_MODAL_MOBILE,
|
|
sourceQuestContent,
|
|
impressionId: getQuestImpressionId()
|
|
});
|
|
} else {
|
|
trackQuestContentClicked({
|
|
questId: quest2.id,
|
|
questContent: QuestContent.VIDEO_MODAL_MOBILE,
|
|
questContentCTA: QuestContentCTA.MOBILE_SHARESHEET,
|
|
impressionId: getQuestImpressionId(),
|
|
sourceQuestContent
|
|
});
|
|
}
|
|
setState5(true);
|
|
showShareActionSheet({
|
|
message: getQuestUrl(quest2.id),
|
|
iOSOnlyShareCallback: () => setState5(false)
|
|
}, `Video Quest Modal - ${quest2.id}`);
|
|
}
|
|
}, [isShareableQuest, quest2.id, getQuestImpressionId, sourceQuestContent]);
|
|
const videoQuestClickCtaAndMaybeCloseModal = useVideoQuestClickCtaAndMaybeCloseModal({
|
|
quest: quest2,
|
|
onClose,
|
|
sourceQuestContent
|
|
});
|
|
const callback4 = useCallback(() => {
|
|
openRewardDetailsBottomSheet({
|
|
questId: quest2.id
|
|
});
|
|
}, [quest2.id]);
|
|
const videoExternallyPaused = useVideoExternallyPaused(quest2.id, state);
|
|
const r85 = quest2.config.taskConfigV2.tasks[FirstPartyQuestTaskTypes.WATCH_VIDEO_ON_MOBILE];
|
|
return r85 == null || getVideoOrientation(r85) === "portrait" ? <Component2 quest={quest2} captionsEnabled={captionsEnabled} handleClose={onClose} handlePrimaryCtaPress={videoQuestClickCtaAndMaybeCloseModal} handleRewardDetailsPress={callback4} handleShareQuest={callback3} handleOpenTranscript={callback2} handleToggleCaptions={callback} isFullscreen={isFullscreen2} onNavigateToPostWatchVideo={onNavigateToPostWatchVideo} onEnd={onEnd} setIsFullscreen={setIsFullscreen2} externallyPaused={videoExternallyPaused} sourceQuestContent={sourceQuestContent} hasCaptionAsset={memo2 != null} hasTranscriptAsset={memo3 != null} isShareable={isShareableQuest} /> : <Component3 quest={quest2} captionsEnabled={captionsEnabled} handleClose={onClose} handlePrimaryCtaPress={videoQuestClickCtaAndMaybeCloseModal} handleRewardDetailsPress={callback4} handleShareQuest={callback3} handleOpenTranscript={callback2} handleToggleCaptions={callback} isFullscreen={isFullscreen2} onNavigateToPostWatchVideo={onNavigateToPostWatchVideo} onEnd={onEnd} setIsFullscreen={setIsFullscreen2} externallyPaused={videoExternallyPaused} sourceQuestContent={sourceQuestContent} hasCaptionAsset={memo2 != null} hasTranscriptAsset={memo3 != null} isShareable={isShareableQuest} />;
|
|
});
|
|
export default r114;
|