yeet

modules/media_viewer/native/components/MediaViewerThumbnails.tsx

@@ -0,0 +1,125 @@
+// Metro module 12302 (f12303).
+import _slicedToArray from "../../../../_bundle/_slicedToArray";
+import * as Module19 from "react";
+import { useCallback, useMemo } from "react";
+import { Pressable, StyleSheet } from "react-native";
+import * as _Constants from "../Constants";
+import { THUMBNAIL_WIDTH_MARGIN } from "../Constants";
+import { useMediaItemSpoilerState } from "../useMediaItemSpoilerState";
+import { useToken } from "../../../../design/tokens/native/useToken";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useAnimatedProps } from "../../../reanimated/ReanimatedRexport";
+import VisualEffectView from "../../../visual_effect_view/native/VisualEffectView";
+import { isAndroid } from "../../../../utils/PlatformUtils";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import FastImage from "../../../../components_native/common/FastImage";
+import { useSelectedMediaSource } from "../MediaSourceUtil";
+import REAWorkaroundView from "../../../reanimated/native/REAWorkaroundView";
+import { AnimatedFastList } from "../../../../lib/native/FastList";
+let useStyles, Component, __initData;
+const ObscuredView = function ObscuredView(props) {
+  let r28;
+  L6: {
+    const source = props.source;
+    const [r20, r13] = useMediaItemSpoilerState(props.index);
+    const token = useToken(Module712.colors.SPOILER_HIDDEN_BACKGROUND);
+    r28 = null;
+    if (r20) {
+      if (!source.spoiler) {
+        const obscure = source.obscure;
+        r28 = null;
+        if (!obscure) {
+          break L6;
+        }
+      }
+      r28 = <ReanimatedRexport.View style={[StyleSheet.absoluteFill, r13]}>
+        <VisualEffectView blurTheme={isAndroid() ? "dark" : "light"} style={StyleSheet.absoluteFill} android_fallbackColor={token} />
+      </ReanimatedRexport.View>;
+    }
+  }
+  return r28;
+};
+const { THUMBNAIL_MARGIN, THUMBNAIL_HEIGHT } = _Constants;
+useStyles = createStyles({
+  containerPortrait: {
+    height: 60
+  },
+  thumbnailButtonPortrait: {
+    overflow: "hidden",
+    marginHorizontal: THUMBNAIL_MARGIN,
+    borderRadius: 2
+  },
+  thumbnailImagePortrait: {
+    height: THUMBNAIL_HEIGHT,
+    width: "100%"
+  }
+});
+Component = Module19.memo(function({ source, numSources, selectedIndex: selectedIndex2, index, onSelect, useThumbnailStyle: useThumbnailStyle2 }) {
+  const styles = useStyles();
+  const source2 = Array.isArray(source) ? source[0] : source;
+  const r25 = useThumbnailStyle2(source2, index);
+  const props = {
+    needsOffscreenAlphaCompositing: true,
+    renderToHardwareTextureAndroid: true,
+    accessibilityRole: "imagebutton",
+    accessibilityLabel: `Thumbnail preview, ${index + 1} of ${numSources}`,
+    accessibilityHint: "Double tap to focus",
+    accessibilityState: {
+      selected: selectedIndex2 === index
+    },
+    onPress: useCallback(() => onSelect(index), [onSelect, index]),
+    children: null
+  };
+  let thumbnail = source2.thumbnail;
+  if (thumbnail == null) {
+    thumbnail = source2;
+  }
+  props.children = [<FastImage style={styles.thumbnailImagePortrait} source={thumbnail} enableAnimation={false} />, <ObscuredView source={source2} index={index} />];
+  return <ReanimatedRexport.View style={[styles.thumbnailButtonPortrait, r25]}>
+    <Pressable {...props} />
+  </ReanimatedRexport.View>;
+});
+__initData = {
+  code: "function MediaViewerThumbnailsTsx1(){const{scrollEnabled}=this.__closure;return{scrollEnabled:scrollEnabled.get()};}"
+};
+export default function MediaViewerThumbnails(props) {
+  let selectedIndex;
+  const syncer = props.syncer;
+  selectedIndex = void 0;
+  const styles = useStyles();
+  const { sources, useThumbnailsProps, index: index2, onEndReached, onEndReachedThreshold, variableWidthThumbnailsEnabled, thumbnailScrollPositions } = syncer;
+  const r30 = useThumbnailsProps(THUMBNAIL_WIDTH_MARGIN, sources.length - 1);
+  const { ref, headerBufferSize, headerBufferStyle, footerBufferSize, footerBufferStyle, scrollEnabled, onScroll, onSelect: onSelect2, useThumbnailStyle, screenWidth, itemSize } = r30;
+  const memo = useMemo(() => {
+    const r5 = [];
+    const length = thumbnailScrollPositions.length;
+    let r0 = 0;
+    if (0 < length) {
+      do {
+        const r1 = r0;
+        if (variableWidthThumbnailsEnabled) {
+          r5.push(thumbnailScrollPositions[r1].scrollStart);
+        } else {
+          r5.push(r1 * THUMBNAIL_WIDTH_MARGIN);
+        }
+        r0 = r1 + 1;
+      } while (r0 < thumbnailScrollPositions.length);
+    }
+    return r5;
+  }, [thumbnailScrollPositions, variableWidthThumbnailsEnabled]);
+  selectedIndex = _slicedToArray(useSelectedMediaSource(syncer), 1)[0];
+  const callback = useCallback((a0, a1) => <Component index={a1} source={sources[a1]} numSources={sources.length} selectedIndex={selectedIndex} onSelect={onSelect2} useThumbnailStyle={useThumbnailStyle} />, [sources, selectedIndex, onSelect2, useThumbnailStyle]);
+  const memo2 = useMemo(() => [sources.length], [sources.length]);
+  const n = () => ({
+    scrollEnabled: scrollEnabled.get()
+  });
+  n.__closure = {
+    scrollEnabled
+  };
+  n.__workletHash = 13439565264141;
+  n.__initData = __initData;
+  const animatedProps = useAnimatedProps(n);
+  const callback2 = useCallback(() => <REAWorkaroundView style={headerBufferStyle} />, [headerBufferStyle]);
+  const callback3 = useCallback(() => <REAWorkaroundView style={footerBufferStyle} />, [footerBufferStyle]);
+  return <AnimatedFastList ref={ref} style={styles.containerPortrait} sections={memo2} stickyHeaderFooter disableContentWrappers automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} initialScrollOrientation="center" initialScrollItem={useMemo(() => index2.get(), [index2])} itemSize={itemSize} renderItem={callback} onScroll={onScroll} horizontal headerSize={headerBufferSize} footerSize={footerBufferSize} renderHeader={callback2} renderFooter={callback3} onEndReached={onEndReached} endReachedThreshold={onEndReachedThreshold} chunkBase={screenWidth} snapToOffsets={memo} animatedProps={animatedProps} />;
+};