306 lines
13 KiB
TypeScript
306 lines
13 KiB
TypeScript
// Metro module 14044 (f14045).
|
|
import { useMemo, useState, useRef, useCallback, useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import VirtualCurrencyStore from "../../../virtual_currency/stores/VirtualCurrencyStore";
|
|
import BountyStore from "../../BountyStore";
|
|
import { QuestsExperimentLocations } from "../../QuestConstants";
|
|
import { jsx } from "react/jsx-runtime";
|
|
import { PlayerState } from "../AdVideoPlayer";
|
|
import { useStateFromStores } from "../../../../_bundle/Module589";
|
|
import { useBountiesExperience } from "../../experiments/useBountiesExperience";
|
|
import { BountyVideoEndMode, useBountiesModalTiming } from "./useBountiesModalTiming";
|
|
import { claimBountyReward } from "../../BountyActionCreators";
|
|
import { openBountyRewardClaimErrorToast } from "./bountyError";
|
|
import { useBountyVideoProgressPersistence } from "./useBountyVideoProgressPersistence";
|
|
import { useBountiesModalVideoAnalytics } from "./useBountiesModalVideoAnalytics";
|
|
import { BountyVideo } from "./BountyVideo";
|
|
import { QuestContentImpressionTrackerNative, BillableAdPlacementImpressionTrackerNative } from "../QuestContentImpressionTracker.native";
|
|
import { AdCreativeType } from "../../../../_bundle/Module6013";
|
|
import { QuestContent } from "../../../../_bundle/Module5038";
|
|
import BountiesScrollEndCard from "./BountiesScrollEndCard";
|
|
function $mk116636($env) {
|
|
return (a0) => a0 != null ? a0 + $env[7] : null;
|
|
}
|
|
let env9820 = {};
|
|
const BountiesScrollVideoItemInner = function BountiesScrollVideoItemInner(props) {
|
|
let env20869 = {
|
|
$parent: env9820
|
|
};
|
|
const bounty2 = props.bounty;
|
|
env20869[0] = bounty2;
|
|
const sourceQuestContent2 = props.sourceQuestContent;
|
|
env20869[1] = sourceQuestContent2;
|
|
const width2 = props.width;
|
|
env20869[2] = width2;
|
|
const height2 = props.height;
|
|
env20869[3] = height2;
|
|
const { index: index2, isActive: isActive3 } = props;
|
|
env20869[4] = isActive3;
|
|
const { isRecapPageRevealed: isRecapPageRevealed2, isRecapPageOnTop: isRecapPageOnTop2, isScrollingInBoundsSharedValue: isScrollingInBoundsSharedValue2 } = props;
|
|
env20869[5] = isScrollingInBoundsSharedValue2;
|
|
const { isScrollIndicatorOverlayEnabled: isScrollIndicatorOverlayEnabled2 = false, shouldLoadHls: shouldLoadHls2 = true, scrollAffordance: scrollAffordance2, peekScale: peekScale2, softDownloadCapsEnabled: softDownloadCapsEnabled2 = false } = props;
|
|
env20869[6] = void 0;
|
|
env20869[7] = void 0;
|
|
env20869[8] = void 0;
|
|
env20869[9] = void 0;
|
|
env20869[10] = void 0;
|
|
env20869[11] = void 0;
|
|
env20869[12] = void 0;
|
|
env20869[13] = void 0;
|
|
env20869[14] = void 0;
|
|
env20869[15] = void 0;
|
|
env20869[16] = void 0;
|
|
env20869[17] = void 0;
|
|
env20869[18] = void 0;
|
|
env20869[19] = void 0;
|
|
env20869[20] = void 0;
|
|
const memo = useMemo(() => ({
|
|
width: env20869[2],
|
|
height: env20869[3]
|
|
}), [width2, height2]);
|
|
const stateFromStores = useStateFromStores([BountyStore], () => BountyStore.isBountyCompleted(env20869[0].id));
|
|
env20869[6] = stateFromStores;
|
|
const [shouldLoadHls3, setState] = useState(shouldLoadHls2);
|
|
const [state, setState2] = useState(shouldLoadHls2);
|
|
if (state !== shouldLoadHls2) {
|
|
setState2(shouldLoadHls2);
|
|
if (shouldLoadHls2) {
|
|
setState(true);
|
|
}
|
|
}
|
|
const bountiesExperience = useBountiesExperience(QuestsExperimentLocations.VIDEO_MODAL_MOBILE);
|
|
const { loopingEnabled, ownedByVerticalScrollExperiment, stage1Enabled, orbAmount } = bountiesExperience;
|
|
env20869[7] = orbAmount;
|
|
const rewardTimerSeconds = bountiesExperience.rewardTimerSeconds;
|
|
const endMode = loopingEnabled ? BountyVideoEndMode.LOOP : ownedByVerticalScrollExperiment ? BountyVideoEndMode.END_CARD : BountyVideoEndMode.END_CARD_WITH_CTA;
|
|
const rewardDurationMs = !stage1Enabled && !ownedByVerticalScrollExperiment ? 1000 * bounty2.rewardTimerSeconds : 1000 * rewardTimerSeconds;
|
|
env20869[8] = rewardDurationMs;
|
|
const ref4 = useRef(null);
|
|
const isActive = isActive3;
|
|
const ref = ref4;
|
|
const ref2 = useRef(true);
|
|
const ref3 = useRef(null);
|
|
const callback2 = useCallback((a0) => {
|
|
ref3.current = a0;
|
|
}, []);
|
|
useEffect(() => {
|
|
if (ref2.current) {
|
|
ref2.current = false;
|
|
} else {
|
|
let r7 = isActive;
|
|
if (isActive) {
|
|
r7 = ref3.current === PlayerState.PAUSED;
|
|
}
|
|
if (r7) {
|
|
const current = ref.current;
|
|
if (current != null) {
|
|
current.play();
|
|
}
|
|
}
|
|
}
|
|
}, [isActive, ref]);
|
|
const [state2, setState3] = useState(isActive);
|
|
const [orbsBalance, setState4] = useState(() => env20869[4] ? VirtualCurrencyStore.getCurrentBalance() : null);
|
|
env20869[9] = setState4;
|
|
const [balanceWidgetPillResetKey, setState5] = useState(0);
|
|
if (state2 !== isActive) {
|
|
setState3(isActive);
|
|
if (isActive) {
|
|
const currentBalance = VirtualCurrencyStore.getCurrentBalance();
|
|
setState4(currentBalance);
|
|
if (currentBalance !== orbsBalance) {
|
|
setState5((prevState5) => prevState5 + 1);
|
|
}
|
|
}
|
|
}
|
|
const callback = useCallback(async () => {
|
|
let c27617_0, c27617_1, c27617_2;
|
|
let c27617_3 = 0;
|
|
const r13 = env20869;
|
|
L14: {
|
|
try {
|
|
let env30694;
|
|
c27617_1 = r13;
|
|
const r28 = env30694 = {
|
|
$parent: r13
|
|
};
|
|
c27617_0 = r28;
|
|
env30694[0] = false;
|
|
c27617_3 = 1;
|
|
await claimBountyReward(env20869[0].id, env20869[1]);
|
|
env30694[0] = true;
|
|
c27617_3 = 0;
|
|
if (env30694[0] && env20869[4]) {
|
|
env20869[9]($mk116636(env20869));
|
|
}
|
|
} catch ($e) {
|
|
const r26 = $e;
|
|
let r7 = r26;
|
|
c27617_2 = r26;
|
|
if (c27617_3 !== 0) {
|
|
while (true) {
|
|
try {
|
|
const r70 = c27617_2;
|
|
c27617_3 = 0;
|
|
env30694[1] = r70;
|
|
openBountyRewardClaimErrorToast(env30694[1]);
|
|
if (!(env30694[0] && env20869[4])) {
|
|
break L14;
|
|
}
|
|
env20869[9]($mk116636(env20869));
|
|
break L14;
|
|
} catch (r66) {
|
|
r7 = r66;
|
|
c27617_2 = r66;
|
|
if (c27617_3 === 0) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
throw r7;
|
|
}
|
|
}
|
|
}, [bounty2.id, isActive, orbAmount, sourceQuestContent2]);
|
|
const bountyVideoProgressPersistence = useBountyVideoProgressPersistence({
|
|
bountyId: bounty2.id,
|
|
endMode
|
|
});
|
|
const { initialProgress, handleProgress } = bountyVideoProgressPersistence;
|
|
env20869[10] = handleProgress;
|
|
const flushProgress = bountyVideoProgressPersistence.flushProgress;
|
|
env20869[11] = flushProgress;
|
|
useEffect(() => () => (0, env20869[11])(), [flushProgress]);
|
|
const bountiesModalVideoAnalytics = useBountiesModalVideoAnalytics({
|
|
bountyId: bounty2.id,
|
|
sourceQuestContent: sourceQuestContent2,
|
|
rewardDurationMs,
|
|
initialPlaybackTimeSec: initialProgress.timestampSec,
|
|
initialMaxVideoProgressSec: initialProgress.maxTimestampSec,
|
|
initialVideoDurationSec: initialProgress.duration,
|
|
wasPreloaded: false,
|
|
startupPath: ownedByVerticalScrollExperiment ? "active_only" : "carousel",
|
|
verticalScrollingPosition: index2,
|
|
isActive
|
|
});
|
|
const handleVideoProgressAnalytics = bountiesModalVideoAnalytics.handleVideoProgressAnalytics;
|
|
env20869[12] = handleVideoProgressAnalytics;
|
|
const { handleVideoEndAnalytics, handleVideoLoopedAnalytics, handleVideoPausedAnalytics, handleVideoResumedAnalytics, handleVideoErrorAnalytics, handleLoadStartAnalytics, handleVideoTracksAnalytics, handleReadyForDisplayAnalytics, handleBufferAnalytics } = bountiesModalVideoAnalytics;
|
|
const onPlaybackTimeChange = scrollAffordance2?.onPlaybackTimeChange;
|
|
env20869[13] = onPlaybackTimeChange;
|
|
const onPaused = scrollAffordance2?.onPaused;
|
|
env20869[14] = onPaused;
|
|
const onResumed = scrollAffordance2?.onResumed;
|
|
env20869[15] = onResumed;
|
|
const onEndCardVisible = scrollAffordance2?.onEndCardVisible;
|
|
env20869[16] = onEndCardVisible;
|
|
const bountiesModalTiming = useBountiesModalTiming({
|
|
endMode,
|
|
rewardDurationMs,
|
|
isCompleted: stateFromStores,
|
|
onRewardEarned: callback,
|
|
onVideoProgress: useCallback((a0, a1, a2) => {
|
|
(0, env20869[12])(a0, a1, a2);
|
|
(0, env20869[10])(a0, a1, a2);
|
|
const r5 = env20869[13];
|
|
if (r5 != null) {
|
|
const r4 = env20869[6];
|
|
r5(a2, a1, r4 || 1000 * a0 >= env20869[8], a0, r4);
|
|
}
|
|
}, [handleVideoProgressAnalytics, handleProgress, stateFromStores, onPlaybackTimeChange, rewardDurationMs]),
|
|
onVideoEnd: handleVideoEndAnalytics,
|
|
onVideoLooped: handleVideoLoopedAnalytics,
|
|
onVideoPaused: handleVideoPausedAnalytics,
|
|
onVideoResumed: handleVideoResumedAnalytics,
|
|
playerRef: ref,
|
|
initialProgressSec: initialProgress.timestampSec,
|
|
initialMaxVideoProgressSec: initialProgress.maxTimestampSec,
|
|
initialVideoDurationSec: initialProgress.duration > 0 ? initialProgress.duration : null
|
|
});
|
|
const { isCtaVisible, isEndCardVisible } = bountiesModalTiming;
|
|
env20869[17] = isEndCardVisible;
|
|
const { handleVideoEnd, handleVideoProgress, handleVideoPaused } = bountiesModalTiming;
|
|
env20869[18] = handleVideoPaused;
|
|
const handleVideoResumed = bountiesModalTiming.handleVideoResumed;
|
|
env20869[19] = handleVideoResumed;
|
|
env20869[20] = bountiesModalTiming.handleReplay;
|
|
const { rewardRemainingSeconds, rewardTotalSeconds, normalizedProgress } = bountiesModalTiming;
|
|
const callback3 = useCallback((a0) => {
|
|
(0, env20869[18])(a0);
|
|
if (!env20869[17]) {
|
|
const r7 = env20869[14];
|
|
if (r7 != null) {
|
|
r7();
|
|
}
|
|
}
|
|
}, [handleVideoPaused, isEndCardVisible, onPaused]);
|
|
const callback4 = useCallback((a0) => {
|
|
(0, env20869[19])(a0);
|
|
const r6 = env20869[15];
|
|
if (r6 != null) {
|
|
r6();
|
|
}
|
|
}, [handleVideoResumed, onResumed]);
|
|
useEffect(() => {
|
|
if (env20869[17] && env20869[4]) {
|
|
const r3 = env20869[16];
|
|
if (r3 != null) {
|
|
r3();
|
|
}
|
|
}
|
|
}, [isActive, isEndCardVisible, onEndCardVisible]);
|
|
return <View style={memo}>
|
|
<BountyVideo bounty={bounty2} sourceQuestContent={sourceQuestContent2} isCompleted={stateFromStores} isCtaVisible={isCtaVisible} isEndCardVisible={isEndCardVisible} isScrollIndicatorEnabled={isScrollIndicatorOverlayEnabled2} isProgressBarVisible={isEndCardVisible ? !isEndCardVisible : !isRecapPageOnTop2} orbsBalance={orbsBalance} handleVideoEnd={handleVideoEnd} handleVideoProgress={handleVideoProgress} handleVideoPaused={callback3} handleVideoResumed={callback4} handleVideoError={handleVideoErrorAnalytics} onLoadStart={handleLoadStartAnalytics} onBuffer={handleBufferAnalytics} onFirstFrame={handleReadyForDisplayAnalytics} onVideoTracks={handleVideoTracksAnalytics} rewardRemainingSeconds={rewardRemainingSeconds} rewardTotalSeconds={rewardTotalSeconds} normalizedProgress={normalizedProgress} repeat={loopingEnabled} initialProgress={initialProgress} isActive={isActive} isRecapPageRevealed={isRecapPageRevealed2} isScrollingInBoundsSharedValue={isScrollingInBoundsSharedValue2} playerRef={ref} onPlayerStateChange={callback2} balanceWidgetPillResetKey={balanceWidgetPillResetKey} shouldLoadHls={shouldLoadHls3} width={width2} height={height2} peekScale={peekScale2} softDownloadCapsEnabled={softDownloadCapsEnabled2} renderEndCard={() => <QuestContentImpressionTrackerNative adContentId={env20869[0].id} adCreativeType={AdCreativeType.BOUNTY} questContent={QuestContent.VIDEO_MODAL_END_CARD} sourceQuestContent={env20869[1]} overrideVisibility={env20869[17]}>
|
|
{() => (0, jsx)(BountiesScrollEndCard, {
|
|
bounty: env20869[0],
|
|
visible: env20869[17],
|
|
onReplay: env20869[20],
|
|
isActive: env20869[4],
|
|
isScrollingInBoundsSharedValue: env20869[5],
|
|
sourceQuestContent: env20869[1]
|
|
})}
|
|
</QuestContentImpressionTrackerNative>} />
|
|
</View>;
|
|
};
|
|
export function BountiesScrollVideoItem(props) {
|
|
const { bounty, sourceQuestContent, width, height, index, isActive: isActive3 = false } = props;
|
|
const isActive2 = isActive3;
|
|
let isRecapPageRevealed2 = props.isRecapPageRevealed;
|
|
if (isRecapPageRevealed2 === void 0) {
|
|
isRecapPageRevealed2 = false;
|
|
}
|
|
const isRecapPageRevealed = isRecapPageRevealed2;
|
|
let isRecapPageOnTop2 = props.isRecapPageOnTop;
|
|
if (isRecapPageOnTop2 === void 0) {
|
|
isRecapPageOnTop2 = false;
|
|
}
|
|
const isRecapPageOnTop = isRecapPageOnTop2;
|
|
const { isScrollingInBoundsSharedValue, isScrollIndicatorOverlayEnabled: isScrollIndicatorOverlayEnabled2 = false } = props;
|
|
const isScrollIndicatorOverlayEnabled = isScrollIndicatorOverlayEnabled2;
|
|
let shouldLoadHls2 = props.shouldLoadHls;
|
|
if (shouldLoadHls2 === void 0) {
|
|
shouldLoadHls2 = true;
|
|
}
|
|
const shouldLoadHls = shouldLoadHls2;
|
|
const { scrollAffordance, peekScale, softDownloadCapsEnabled: softDownloadCapsEnabled2 = false } = props;
|
|
const softDownloadCapsEnabled = softDownloadCapsEnabled2;
|
|
return <BillableAdPlacementImpressionTrackerNative adContentId={bounty.id} adCreativeType={AdCreativeType.BOUNTY} questContent={QuestContent.VIDEO_MODAL_MOBILE} sourceQuestContent={sourceQuestContent} overrideVisibility={isActive2}>
|
|
{() => (0, jsx)(BountiesScrollVideoItemInner, {
|
|
bounty,
|
|
sourceQuestContent,
|
|
width,
|
|
height,
|
|
index,
|
|
isActive: isActive2,
|
|
isRecapPageRevealed,
|
|
isRecapPageOnTop,
|
|
isScrollingInBoundsSharedValue,
|
|
isScrollIndicatorOverlayEnabled,
|
|
shouldLoadHls,
|
|
scrollAffordance,
|
|
peekScale,
|
|
softDownloadCapsEnabled
|
|
})}
|
|
</BillableAdPlacementImpressionTrackerNative>;
|
|
}
|