237 lines
8.7 KiB
TypeScript
237 lines
8.7 KiB
TypeScript
// Metro module 8519 (f8520).
|
|
import { useRef, useCallback, useState, useEffect, useMemo } from "react";
|
|
import { Image as Image2, Pressable, ScrollView, View } from "react-native";
|
|
import { NOOP } from "../../../../_bundle/Module505";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { GameProfileTrackActionActions } from "../../GameProfileAnalyticUtils";
|
|
import { openMediaModal } from "../../../media_viewer/native/components/openMediaModal";
|
|
import { createVideoControls, VideoComponent } from "../../../../components_native/common/Video";
|
|
import { isAndroid } from "../../../../_bundle/Module501";
|
|
import useWindowDimensions_native from "../../../screen/useWindowDimensions.native";
|
|
import { useObscuredSurface } from "../../../safety_common/ObscuredSurfaceContext";
|
|
import { getBestMediaProxySize, getDevicePixelRatio } from "../../../image_upload/ImageLoaderUtils";
|
|
import { getAssetURL } from "../../../../utils/StoreUtils";
|
|
import { HermesBuiltin } from "../../../../_hermes/prelude";
|
|
let width, useStyles, TrailerItem;
|
|
const ImageItem = function ImageItem(props) {
|
|
const { url, index, sources, trackAction, width: width4, height: height2, onScrollToIndex, setMediaModalOpen } = props;
|
|
const styles = useStyles();
|
|
const ref = useRef(null);
|
|
return <Pressable ref={ref} style={[styles.mediaItem, {
|
|
width: width4,
|
|
height: height2
|
|
}]} onPress={useCallback(() => {
|
|
trackAction(GameProfileTrackActionActions.ClickImage);
|
|
setMediaModalOpen(true);
|
|
openMediaModal({
|
|
initialSources: sources,
|
|
initialIndex: index,
|
|
originViewOrOriginLayout: ref.current,
|
|
analyticsSource: "game_profile",
|
|
openAs: "action-sheet",
|
|
onIndexChange: (a0) => onScrollToIndex(a0),
|
|
onClose: () => setMediaModalOpen(false)
|
|
});
|
|
}, [sources, index, trackAction, onScrollToIndex, setMediaModalOpen])}>
|
|
<Image2 source={{
|
|
uri: url
|
|
}} style={styles.mediaImage} />
|
|
</Pressable>;
|
|
};
|
|
TrailerItem = function TrailerItem(props) {
|
|
let ref4;
|
|
const { url, posterUrl, active, index: index2, sources: sources2, trackAction: trackAction2, width: width4, height: height2, onScrollToIndex: onScrollToIndex2, setMediaModalOpen: setMediaModalOpen2 } = props;
|
|
ref4 = void 0;
|
|
const styles = useStyles();
|
|
const ref2 = useRef(null);
|
|
const ref3 = useRef(0);
|
|
const [state, setState] = useState(0);
|
|
const callback2 = useCallback((a0) => {
|
|
ref3.current = a0;
|
|
}, []);
|
|
ref4 = useRef(createVideoControls(NOOP));
|
|
ref4.current.useSubscribe(callback2, NOOP, NOOP);
|
|
useEffect(() => {
|
|
if (isAndroid() && !active) {
|
|
setState((prevState) => prevState + 1);
|
|
} else {
|
|
ref4.current.seek(0);
|
|
}
|
|
}, [active]);
|
|
return <Pressable ref={ref2} style={[styles.mediaItem, {
|
|
width: width4,
|
|
height: height2
|
|
}]} onPress={useCallback(() => {
|
|
trackAction2(GameProfileTrackActionActions.ClickTrailer);
|
|
setMediaModalOpen2(true);
|
|
openMediaModal({
|
|
initialSources: sources2,
|
|
initialIndex: index2,
|
|
initialIndexVideoStartTime: ref3.current,
|
|
originViewOrOriginLayout: ref2.current,
|
|
analyticsSource: "game_profile",
|
|
openAs: "action-sheet",
|
|
onIndexChange: (a0) => onScrollToIndex2(a0),
|
|
onClose: () => setMediaModalOpen2(false)
|
|
});
|
|
}, [trackAction2, sources2, index2, onScrollToIndex2, setMediaModalOpen2])}>
|
|
<VideoComponent key={isAndroid() ? `render-${state}` : void 0} style={styles.mediaVideo} source={{
|
|
uri: url
|
|
}} poster={posterUrl} paused={!active} muted resizeMode="cover" pauseWhileAppInactive controls={ref4.current} />
|
|
</Pressable>;
|
|
};
|
|
width = 1920;
|
|
useStyles = createStyles({
|
|
container: {
|
|
gap: Module712.space.PX_12,
|
|
marginHorizontal: -Module712.space.PX_16
|
|
},
|
|
scrollView: {
|
|
flexDirection: "row",
|
|
overflow: "visible"
|
|
},
|
|
scrollViewContent: {
|
|
gap: Module712.space.PX_12,
|
|
paddingHorizontal: Module712.space.PX_16
|
|
},
|
|
mediaItem: {
|
|
maxWidth: 366,
|
|
maxHeight: 200,
|
|
borderRadius: Module712.radii.lg,
|
|
overflow: "hidden",
|
|
...Module712.shadows.SHADOW_HIGH
|
|
},
|
|
mediaImage: {
|
|
width: "100%",
|
|
height: "100%",
|
|
resizeMode: "cover"
|
|
},
|
|
mediaVideo: {
|
|
width: "100%",
|
|
height: "100%",
|
|
backgroundColor: Module712.colors.BLACK
|
|
}
|
|
});
|
|
export default function GameProfileMedia(props) {
|
|
let width3, height, memo, memo2, memo3, memo4, memo5, callback;
|
|
const { game, trackAction: trackAction3 } = props;
|
|
width3 = void 0;
|
|
height = void 0;
|
|
memo = void 0;
|
|
memo2 = void 0;
|
|
memo3 = void 0;
|
|
memo4 = void 0;
|
|
memo5 = void 0;
|
|
callback = void 0;
|
|
const styles = useStyles();
|
|
const width2 = useWindowDimensions_native().width;
|
|
const obscured = useObscuredSurface().obscured;
|
|
const [state, setState2] = useState(0);
|
|
const [state2, setState3] = useState(0);
|
|
const [state3, setState4] = useState(false);
|
|
const ref5 = useRef(null);
|
|
[width3, height] = useMemo(() => {
|
|
const bestMediaProxySize = getBestMediaProxySize(Math.min(width2, width) * getDevicePixelRatio());
|
|
return [bestMediaProxySize, bestMediaProxySize / 1.83];
|
|
}, [width2]);
|
|
const callback2 = useCallback((a0) => {
|
|
setState2(a0.nativeEvent.layout.width);
|
|
}, []);
|
|
memo = useMemo(() => {
|
|
let r10;
|
|
if (game == null) {
|
|
r10 = [];
|
|
} else {
|
|
let trailers = game.trailers;
|
|
if (trailers == null) {
|
|
trailers = [];
|
|
}
|
|
const r8 = trailers.map((trailer) => ({
|
|
type: "trailer",
|
|
url: getAssetURL(trailer.application_id, trailer.id, 1920, "mp4"),
|
|
thumbnailUrl: getAssetURL(trailer.application_id, trailer.id, Math.min(width2, width), "webp")
|
|
}));
|
|
r10 = [];
|
|
const r0 = HermesBuiltin.arraySpread(r10, r8, 0);
|
|
let screenshotUrls = game.screenshotUrls;
|
|
if (screenshotUrls == null) {
|
|
screenshotUrls = [];
|
|
}
|
|
HermesBuiltin.arraySpread(r10, screenshotUrls.map((screenshotUrl) => ({
|
|
type: "image",
|
|
url: screenshotUrl,
|
|
thumbnailUrl: screenshotUrl.replace.call(screenshotUrl, /size=\d+/g, `size=${width3}`)
|
|
})), r0);
|
|
}
|
|
return r10;
|
|
}, [game, width3, width2]);
|
|
memo2 = useMemo(() => Math.max(0, Math.min(366, state - Module712.space.PX_12 - 2 * Module712.space.PX_16)), [state]);
|
|
memo3 = useMemo(() => Math.min(200, memo2 / 1.83), [memo2]);
|
|
memo4 = useMemo(() => memo.map((item, index) => ({
|
|
uri: item.url,
|
|
videoURI: item.type === "trailer" ? item.url : void 0,
|
|
mediaIndex: index,
|
|
width,
|
|
height: 1080,
|
|
thumbnail: {
|
|
width: width3,
|
|
height,
|
|
uri: item.thumbnailUrl
|
|
},
|
|
accessoryType: "embed",
|
|
disableDownload: true
|
|
})), [memo, width3, height]);
|
|
memo5 = useMemo(() => {
|
|
let c26212_0 = (state - memo2 - 2 * Module712.space.PX_16) / 2;
|
|
let c26212_1 = memo2 + Module712.space.PX_12;
|
|
return memo.map((item, index) => Math.max(0, index * c26212_1 - c26212_0));
|
|
}, [memo, state, memo2]);
|
|
const callback3 = useCallback((a0) => {
|
|
let length;
|
|
if (memo5.length !== 0) {
|
|
const r11 = a0.nativeEvent.contentOffset.x;
|
|
const r20 = Math.abs(memo5[0] - r11);
|
|
const r6 = 1 < memo5.length;
|
|
let r2 = 1;
|
|
let r22 = r20;
|
|
let r1 = 0;
|
|
let r23 = 0;
|
|
if (r6) {
|
|
do {
|
|
const r28 = Math.abs(memo5[r2] - r11);
|
|
const r3 = r2;
|
|
let r29 = r22;
|
|
let r0 = r1;
|
|
if (r28 < r29) {
|
|
r29 = r28;
|
|
r0 = r3;
|
|
}
|
|
r2 = r3 + 1;
|
|
length = memo5.length;
|
|
r22 = r29;
|
|
r1 = r0;
|
|
r23 = r1;
|
|
} while (r2 < length);
|
|
}
|
|
setState3(r23);
|
|
}
|
|
}, [memo5]);
|
|
callback = useCallback((a0) => {
|
|
const current = ref5.current;
|
|
if (current != null) {
|
|
current.scrollTo({
|
|
x: memo5[a0],
|
|
y: 0,
|
|
animated: false
|
|
});
|
|
}
|
|
setState3(a0);
|
|
}, [memo5]);
|
|
return memo.length !== 0 ? <View style={styles.container} onLayout={callback2}>
|
|
<ScrollView ref={ref5} horizontal showsHorizontalScrollIndicator={false} style={styles.scrollView} contentContainerStyle={styles.scrollViewContent} decelerationRate="fast" snapToOffsets={memo5} snapToStart={false} snapToEnd={false} onMomentumScrollEnd={callback3}>
|
|
{memo.map((item, a1) => item.type === "trailer" ? <TrailerItem key={`${item.url}-${a1}`} url={item.url} posterUrl={item.thumbnailUrl} active={(obscured ? !obscured : !state3) && state2 === a1} index={a1} sources={memo4} trackAction={trackAction3} width={memo2} height={memo3} onScrollToIndex={callback} setMediaModalOpen={setState4} /> : <ImageItem key={`${item.url}-${a1}`} url={item.url} index={a1} sources={memo4} trackAction={trackAction3} width={memo2} height={memo3} onScrollToIndex={callback} setMediaModalOpen={setState4} />)}
|
|
</ScrollView>
|
|
</View> : null;
|
|
};
|