233 lines
11 KiB
TypeScript
233 lines
11 KiB
TypeScript
// Metro module 14061 (f14062).
|
|
import { useState, useRef, useMemo, useEffect, useCallback } from "react";
|
|
import { ActivityIndicator, StyleSheet, View } from "react-native";
|
|
import { QuestsExperimentLocations } from "../../QuestConstants";
|
|
import { isAndroid } from "../../../../_bundle/Module501";
|
|
import { getScaledFirstFrameImageUrl } from "../../lib/AssetUtils";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import BountiesModalProgress, { PROGRESS_BAR_HEIGHT } from "./BountiesModalProgress";
|
|
import { useBountiesExperience } from "../../experiments/useBountiesExperience";
|
|
import { useIsBountiesVerticalScrollExperimentEnabled } from "../../experiments/BountiesVerticalScrollExperiment";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import * as _timingPresets from "../../../../design/animation/reanimated/timing/timingPresets";
|
|
import { timingFast } from "../../../../design/animation/reanimated/timing/timingPresets";
|
|
import * as _useBountiesAutoScroll from "./useBountiesAutoScroll";
|
|
import { AdVideoPlayer } from "../AdVideoPlayer";
|
|
import { SOFT_CAP_PRELOAD_MAX_BITRATE, SOFT_CAP_PRELOAD_BUFFER_CONFIG, SOFT_CAP_PRELOAD_FORWARD_BUFFER_SEC } from "./bountiesSoftCapPreload";
|
|
import FastImage from "../../../../components_native/common/FastImage";
|
|
import BountiesScrollIndicatorOverlay from "./BountiesScrollIndicatorOverlay";
|
|
import BountiesModalAdvertiserCta from "./BountiesModalAdvertiserCta";
|
|
import BountiesModalTimer from "./BountiesModalTimer";
|
|
import { BalanceWidgetPill } from "../../../virtual_currency/native/BalanceWidgetPill";
|
|
let __initData, __initData2, __initData3;
|
|
let c9833_12 = isAndroid() ? 150 : 0;
|
|
const contentInsets = {
|
|
top: 48,
|
|
bottom: 16,
|
|
left: 16,
|
|
right: 16
|
|
};
|
|
const lg = Module712.radii.lg;
|
|
const useStyles = createStyles(() => ({
|
|
videoContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
overflow: "hidden",
|
|
borderRadius: lg
|
|
},
|
|
leftRow: {
|
|
position: "absolute",
|
|
top: Module712.space.PX_8,
|
|
left: Module712.space.PX_8,
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: Module712.space.PX_8
|
|
},
|
|
progress: {
|
|
position: "absolute",
|
|
bottom: 0,
|
|
height: PROGRESS_BAR_HEIGHT,
|
|
left: lg,
|
|
right: lg
|
|
},
|
|
poster: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: "#000000",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
peekOrigin: {
|
|
transformOrigin: "top"
|
|
}
|
|
}));
|
|
__initData = {
|
|
code: "function BountyVideoTsx1(){const{posterOpacity}=this.__closure;return{opacity:posterOpacity.get()};}"
|
|
};
|
|
__initData2 = {
|
|
code: "function BountyVideoTsx2(){const{isScrollingInBoundsSharedValue,withTiming,isActive,timingStandard}=this.__closure;var _isScrollingInBoundsS;const isScrollingInBounds=((_isScrollingInBoundsS=isScrollingInBoundsSharedValue)===null||_isScrollingInBoundsS===void 0?void 0:_isScrollingInBoundsS.get())===true;return{opacity:withTiming(isActive&&!isScrollingInBounds?1:0,timingStandard)};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function BountyVideoTsx3(){const{peekScale,AUTO_SCROLL_PEEK_SCALE,AUTO_SCROLL_PEEK_TOP_OFFSET}=this.__closure;if(peekScale==null){return{};}const scale=peekScale.get();const scaleProgress=(1-scale)/(1-AUTO_SCROLL_PEEK_SCALE);return{transform:[{translateY:scaleProgress*AUTO_SCROLL_PEEK_TOP_OFFSET},{scale:scale}]};}"
|
|
};
|
|
export function BountyVideo(props) {
|
|
let callback;
|
|
const { bounty, sourceQuestContent, isCompleted, isCtaVisible, isEndCardVisible } = props;
|
|
let isScrollIndicatorEnabled = props.isScrollIndicatorEnabled;
|
|
const { isProgressBarVisible, orbsBalance, handleVideoEnd, handleVideoProgress, handleVideoPaused, handleVideoResumed, handleVideoError, onLoadStart, onBuffer, onFirstFrame, onVideoTracks, rewardRemainingSeconds, rewardTotalSeconds, normalizedProgress, initialProgress, repeat } = props;
|
|
let isActive = props.isActive;
|
|
if (isActive === void 0) {
|
|
isActive = false;
|
|
}
|
|
let c20877_4 = isActive;
|
|
const { isRecapPageRevealed = false, isScrollingInBoundsSharedValue, renderEndCard, playerRef, onPlayerStateChange, balanceWidgetPillResetKey, shouldLoadHls = true, width, height, peekScale } = props;
|
|
let softDownloadCapsEnabled = props.softDownloadCapsEnabled;
|
|
if (softDownloadCapsEnabled === void 0) {
|
|
softDownloadCapsEnabled = false;
|
|
}
|
|
callback = void 0;
|
|
const styles = useStyles();
|
|
const bountiesExperience = useBountiesExperience(QuestsExperimentLocations.VIDEO_MODAL_MOBILE);
|
|
const { ownedByVerticalScrollExperiment, stage1Enabled } = bountiesExperience;
|
|
const isBountiesVerticalScrollExperimentEnabled = useIsBountiesVerticalScrollExperimentEnabled("BountyVideo");
|
|
if (softDownloadCapsEnabled) {
|
|
softDownloadCapsEnabled = !isActive;
|
|
}
|
|
const [state2, setState] = useState(false);
|
|
const [state, setState2] = useState(false);
|
|
const ref = useRef(null);
|
|
const sharedValue = useSharedValue(1);
|
|
const memo = useMemo(() => getScaledFirstFrameImageUrl({
|
|
assetUrl: bounty.videoHls,
|
|
width,
|
|
height
|
|
}), [bounty, width, height]);
|
|
const token = useToken(Module712.colors.TEXT_DEFAULT);
|
|
const r98 = `${bounty.id}:${shouldLoadHls}`;
|
|
const [state3, setState3] = useState(r98);
|
|
if (state3 !== r98) {
|
|
setState3(r98);
|
|
setState2(false);
|
|
sharedValue.set(1);
|
|
}
|
|
useEffect(() => () => {
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
ref.current = null;
|
|
}
|
|
}, [r98]);
|
|
useEffect(() => {
|
|
if (state) {
|
|
sharedValue.set(_timing.withTiming(0, timingFast));
|
|
}
|
|
}, [state, sharedValue]);
|
|
callback = useCallback(() => {
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
ref.current = null;
|
|
}
|
|
setState2(true);
|
|
}, []);
|
|
const callback2 = useCallback(() => {
|
|
if (onFirstFrame != null) {
|
|
onFirstFrame();
|
|
}
|
|
if (ref.current != null) {
|
|
clearTimeout(ref.current);
|
|
}
|
|
ref.current = setTimeout(() => {
|
|
setState2(true);
|
|
ref.current = null;
|
|
}, c9833_12);
|
|
}, [onFirstFrame]);
|
|
const callback3 = useCallback((a0) => {
|
|
callback();
|
|
if (handleVideoError != null) {
|
|
handleVideoError(a0);
|
|
}
|
|
}, [callback, handleVideoError]);
|
|
const callback4 = useCallback((a0) => {
|
|
if (a0.currentTime > 0) {
|
|
setState(true);
|
|
}
|
|
handleVideoProgress(a0);
|
|
}, [handleVideoProgress]);
|
|
const Ce = () => ({
|
|
opacity: sharedValue.get()
|
|
});
|
|
Ce.__closure = {
|
|
posterOpacity: sharedValue
|
|
};
|
|
Ce.__workletHash = 4975136521719;
|
|
Ce.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(Ce);
|
|
const Ae = function Ae() {
|
|
const r4 = isScrollingInBoundsSharedValue == null ? void 0 : isScrollingInBoundsSharedValue.get();
|
|
return {
|
|
opacity: _timing.withTiming(c20877_4 ? r4 !== true ? 1 : 0 : 0, _timingPresets.timingStandard)
|
|
};
|
|
};
|
|
Ae.__closure = {
|
|
isScrollingInBoundsSharedValue,
|
|
withTiming: _timing.withTiming,
|
|
isActive,
|
|
timingStandard: _timingPresets.timingStandard
|
|
};
|
|
Ae.__workletHash = 12676706441349;
|
|
Ae.__initData = __initData2;
|
|
const animatedStyle2 = useAnimatedStyle(Ae);
|
|
const Fe = function Fe() {
|
|
if (peekScale == null) {
|
|
return {};
|
|
}
|
|
const scale = peekScale.get();
|
|
return {
|
|
transform: [{
|
|
translateY: (1 - scale) / (1 - _useBountiesAutoScroll.AUTO_SCROLL_PEEK_SCALE) * _useBountiesAutoScroll.AUTO_SCROLL_PEEK_TOP_OFFSET
|
|
}, {
|
|
scale
|
|
}]
|
|
};
|
|
};
|
|
Fe.__closure = {
|
|
peekScale,
|
|
AUTO_SCROLL_PEEK_SCALE: _useBountiesAutoScroll.AUTO_SCROLL_PEEK_SCALE,
|
|
AUTO_SCROLL_PEEK_TOP_OFFSET: _useBountiesAutoScroll.AUTO_SCROLL_PEEK_TOP_OFFSET
|
|
};
|
|
Fe.__workletHash = 7501077341815;
|
|
Fe.__initData = __initData3;
|
|
const animatedStyle3 = useAnimatedStyle(Fe);
|
|
const visible = isBountiesVerticalScrollExperimentEnabled ? isCtaVisible ? !isEndCardVisible : isCtaVisible : isCtaVisible;
|
|
const r203 = [shouldLoadHls ? <AdVideoPlayer ref={playerRef} source={{
|
|
uri: bounty.videoHls
|
|
}} automaticallyWaitsToMinimizeStalling={(stage1Enabled ? !stage1Enabled : !ownedByVerticalScrollExperiment) && void 0} maxBitRate={softDownloadCapsEnabled ? SOFT_CAP_PRELOAD_MAX_BITRATE : void 0} bufferConfig={softDownloadCapsEnabled ? SOFT_CAP_PRELOAD_BUFFER_CONFIG : void 0} preferredForwardBufferDuration={softDownloadCapsEnabled ? SOFT_CAP_PRELOAD_FORWARD_BUFFER_SEC : void 0} initialProgress={initialProgress} isFullscreen={false} externallyPaused={(isActive ? isEndCardVisible : !isActive) || isRecapPageRevealed} style={StyleSheet.absoluteFillObject} contentInsets={contentInsets} onProgress={callback4} onEnd={handleVideoEnd} onPausePlayback={handleVideoPaused} onResumePlayback={handleVideoResumed} onError={callback3} onLoadStart={onLoadStart} onBuffer={onBuffer} onReadyForDisplay={callback2} onVideoTracks={onVideoTracks} hideControls={isEndCardVisible} showSkipButtons={false} repeat={repeat} bufferingSpinnerPlacement="center" onPlayerStateChange={onPlayerStateChange} /> : null, memo != null ? <ReanimatedRexport.View style={[styles.poster, animatedStyle]} pointerEvents="none">
|
|
<FastImage style={StyleSheet.absoluteFillObject} source={{
|
|
uri: memo
|
|
}} resizeMode="cover" />
|
|
{state ? !state : <ActivityIndicator animating size="small" color={token} />}
|
|
</ReanimatedRexport.View> : <ReanimatedRexport.View style={[styles.poster, animatedStyle]} pointerEvents="none" />, renderEndCard == null ? void 0 : renderEndCard(), , ,];
|
|
if (isScrollIndicatorEnabled) {
|
|
if (isActive) {
|
|
isActive = state2;
|
|
}
|
|
isScrollIndicatorEnabled = <BountiesScrollIndicatorOverlay opacityStyle={animatedStyle2} enabled={isActive} isEndCardVisible={isEndCardVisible} />;
|
|
}
|
|
r203[3] = isScrollIndicatorEnabled;
|
|
r203[4] = <ReanimatedRexport.View style={[StyleSheet.absoluteFillObject, animatedStyle2]} pointerEvents="box-none">
|
|
<BountiesModalAdvertiserCta bounty={bounty} visible={visible} sourceQuestContent={sourceQuestContent} />
|
|
</ReanimatedRexport.View>;
|
|
return <>
|
|
<ReanimatedRexport.View style={[StyleSheet.absoluteFillObject, styles.peekOrigin, animatedStyle3]}>
|
|
<View style={styles.videoContainer}>{r203}</View>
|
|
<ReanimatedRexport.View style={[styles.progress, animatedStyle2]}>
|
|
<BountiesModalProgress progress={normalizedProgress} visible={isProgressBarVisible} />
|
|
</ReanimatedRexport.View>
|
|
</ReanimatedRexport.View>
|
|
<ReanimatedRexport.View style={[styles.leftRow, animatedStyle2]}>
|
|
<BountiesModalTimer isCompleted={isCompleted} totalSeconds={rewardTotalSeconds} remainingSeconds={rewardRemainingSeconds} />
|
|
<BalanceWidgetPill key={balanceWidgetPillResetKey} balance={orbsBalance} />
|
|
</ReanimatedRexport.View>
|
|
</>;
|
|
}
|