yeet

modules/game_profile/native/components/GameProfileMedia.tsx

@@ -0,0 +1,236 @@
+// 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;
+};