yeet

modules/media_viewer/native/components/overlay/MediaModalOverlay.tsx

@@ -0,0 +1,153 @@
+// Metro module 12297 (f12298).
+import { useCallback, useEffect, memo, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import * as _SafeAreaView from "../../../../../components_native/common/SafeAreaView";
+import TouchableHitBox from "../../../../../design/void/TouchableHitBox/native/TouchableHitBox";
+import { intl, t } from "../../../../../intl/index.native";
+import Module12298 from "../../../../../_bundle/Module12298";
+import Module10805 from "../../../../../_bundle/Module10805";
+import Module12299 from "../../../../../_bundle/Module12299";
+import Module12300 from "../../../../../_bundle/Module12300";
+import { useOverlayLayoutDriver, useFooterLayoutAnimation } from "../../useOverlayLayoutDriver";
+import { useMediaPlayerMutedStore } from "../../MediaPlayerMuteManager";
+import { isIOS } from "../../../../../utils/PlatformUtils";
+import VisualEffectView from "../../../../visual_effect_view/native/VisualEffectView";
+import MediaViewerThumbnails from "../MediaViewerThumbnails";
+import { useMediaViewerDimensions } from "../../MediaViewerDimensionsContext";
+import { MediaModalOverlayHeader } from "./MediaModalOverlayHeader";
+import ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import MediaModalOverlayAltText from "./MediaModalOverlayAltText";
+import useVideoControls, { setVideoStateControls, toggleMuted } from "../../useVideoControls";
+import { MediaModalOverlayFooter } from "./MediaModalOverlayFooter";
+import { useMediaItemSpoilerState } from "../../useMediaItemSpoilerState";
+import { toggleSpoiler } from "../../useMediaViewerSources";
+import { useSelectedMediaSource } from "../../MediaSourceUtil";
+import { HermesBuiltin } from "../../../../../_hermes/prelude";
+let useStyles, OverlayObscureToggleButton, Component, MediaModalOverlay;
+const OverlayMuteButton = function OverlayMuteButton(props) {
+  const { isMuted, onToggleMute } = props;
+  const styles = useStyles();
+  return <_SafeAreaView.SafeAreaPaddingView left right>
+    <TouchableHitBox accessibilityRole="button" accessibilityLabel={intl.string(t.w4m945)} source={isMuted ? Module12298 : Module10805} color={Module712.unsafe_rawColors.WHITE} onPress={onToggleMute} style={styles.overlayButton} iconStyle={styles.overlayButtonIcon} />
+  </_SafeAreaView.SafeAreaPaddingView>;
+};
+OverlayObscureToggleButton = function OverlayObscureToggleButton(props) {
+  const { spoilerActive, onToggleObscure } = props;
+  const styles = useStyles();
+  return <_SafeAreaView.SafeAreaPaddingView left right>
+    <TouchableHitBox accessibilityRole="button" accessibilityLabel={intl.string(t.UIsxUw)} source={spoilerActive ? Module12299 : Module12300} color={Module712.unsafe_rawColors.WHITE} onPress={onToggleObscure} style={styles.overlayButton} iconStyle={styles.overlayButtonIcon} />
+  </_SafeAreaView.SafeAreaPaddingView>;
+};
+MediaModalOverlay = function MediaModalOverlay(props) {
+  const { getVideoControls, source, index } = props;
+  const videoControls = getVideoControls(index, source);
+  const videoControls2 = useVideoControls(index, source, videoControls);
+  const [spoilerActive] = useMediaItemSpoilerState(index);
+  const callback = useCallback(() => toggleSpoiler(index), [index]);
+  useEffect(() => {
+    setVideoStateControls(videoControls);
+  }, [videoControls]);
+  let obscure = source.obscure;
+  if (obscure == null) {
+    obscure = false;
+  }
+  return <Component {...props} slider={videoControls2} source={source} obscure={obscure} spoilerActive={spoilerActive} toggleObscure={callback} />;
+};
+useStyles = createStyles({
+  portraitFooterButtons: {
+    ...StyleSheet.absoluteFillObject,
+    top: void 0,
+    backgroundColor: "transparent"
+  },
+  invisibleFooter: {
+    paddingBottom: Module712.space.PX_8
+  },
+  overlayIcons: {
+    position: "absolute",
+    top: -40,
+    right: 8,
+    display: "flex",
+    flexDirection: "row",
+    gap: Module712.space.PX_4
+  },
+  overlayButtonIcon: {
+    width: 20,
+    height: 20
+  },
+  overlayButton: {
+    width: 32,
+    height: 32,
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    borderRadius: 16
+  }
+});
+Component = memo(function({ slider, onClose, overlayEnabled, syncer, disableDownload, disableMediaOverlayButton, disableMediaOverlayFooter, shareable, contextName, contextIcon, source, obscure, spoilerActive, toggleObscure }) {
+  let r10, SafeAreaPaddingView;
+  const styles = useStyles();
+  const overlayLayoutDriver = useOverlayLayoutDriver();
+  const footerLayoutAnimation = useFooterLayoutAnimation(overlayLayoutDriver);
+  const [state, onFullViewToggled] = useState(false);
+  const mediaPlayerMutedStore = useMediaPlayerMutedStore((a0) => a0.isMuted);
+  if (slider == null) {
+    const r53 = syncer.sources.length > 1;
+    r10 = null;
+    if (r53) {
+      SafeAreaPaddingView = _SafeAreaView.SafeAreaPaddingView;
+      r10 = <SafeAreaPaddingView bottom left right style={{
+        paddingTop: 8
+      }}>
+        {isIOS() && <VisualEffectView blurTheme="dark" style={StyleSheet.absoluteFill} />}
+        {slider}
+        {syncer.sources.length > 1 ? <MediaViewerThumbnails syncer={syncer} /> : null}
+      </SafeAreaPaddingView>;
+    }
+  } else {
+    SafeAreaPaddingView = _SafeAreaView.SafeAreaPaddingView;
+    r10 = <SafeAreaPaddingView bottom left right style={{
+      paddingTop: 8
+    }}>
+      {isIOS() && <VisualEffectView blurTheme="dark" style={StyleSheet.absoluteFill} />}
+      {slider}
+      {syncer.sources.length > 1 ? <MediaViewerThumbnails syncer={syncer} /> : null}
+    </SafeAreaPaddingView>;
+  }
+  const height = useMediaViewerDimensions().height;
+  const r91 = [<MediaModalOverlayHeader animationDriver={overlayLayoutDriver} disableDownload={disableDownload} disableMediaOverlayButton={disableMediaOverlayButton} source={source} shareable={shareable} contextName={contextName} contextIcon={contextIcon} onClose={onClose} channelId={source.channelId} />, ,];
+  const r104 = [state ? !state : <MediaModalOverlayAltText description={source.description} />, slider == null ? obscure ? <View style={styles.overlayIcons}>
+    {slider != null && <OverlayMuteButton isMuted={mediaPlayerMutedStore} onToggleMute={toggleMuted} />}
+    {obscure ? <OverlayObscureToggleButton spoilerActive={spoilerActive} onToggleObscure={toggleObscure} /> : null}
+  </View> : null : <View style={styles.overlayIcons}>
+    {slider != null && <OverlayMuteButton isMuted={mediaPlayerMutedStore} onToggleMute={toggleMuted} />}
+    {obscure ? <OverlayObscureToggleButton spoilerActive={spoilerActive} onToggleObscure={toggleObscure} /> : null}
+  </View>, ,];
+  if (disableMediaOverlayFooter) {
+    r10 = <_SafeAreaView.SafeAreaPaddingView bottom style={styles.invisibleFooter} />;
+  } else if (!(height < 600)) {
+    r10 = <MediaModalOverlayFooter sliderElement={slider} syncer={syncer} guildId={source.guildId} channelId={source.channelId} messageId={source.messageId} onClose={onClose} onFullViewToggled={onFullViewToggled} overlayEnabled={overlayEnabled} />;
+  }
+  r104[2] = r10;
+  r91[1] = <ReanimatedRexport.View style={[styles.portraitFooterButtons, footerLayoutAnimation]}>{r104}</ReanimatedRexport.View>;
+  return <>{r91}</>;
+});
+export default function MediaModalOverlayGuard(props) {
+  const onIndexChange = props.onIndexChange;
+  const r15 = {};
+  let r3 = null;
+  const props2 = HermesBuiltin.copyDataProperties(r15, props, {
+    __proto__: null,
+    onIndexChange: 0
+  });
+  const [index2, source] = useSelectedMediaSource(props2.syncer);
+  let c19775_1 = index2;
+  useEffect(() => {
+    if (onIndexChange != null) {
+      onIndexChange(c19775_1);
+    }
+  }, [index2, onIndexChange]);
+  if (source != null) {
+    r3 = <MediaModalOverlay {...props2} source={source} index={index2} />;
+  }
+  return r3;
+};

modules/media_viewer/native/components/overlay/MediaModalOverlayAltText.tsx

@@ -0,0 +1,49 @@
+// Metro module 12309 (f12310).
+import { memo } from "react";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import useSafeAreaInsets_native from "../../../../safe_area/useSafeAreaInsets.native";
+import { ViewImageDescriptions } from "../../../../user_settings/UserSettings";
+import { PressableOpacity } from "../../../../../design/void/Pressables/native/Pressables";
+import openMediaModalOverlayAltTextSheet from "./openMediaModalOverlayAltTextSheet";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import { intl, t } from "../../../../../intl/index.native";
+const useStyles = createStyles((a0) => ({
+  container: {
+    backgroundColor: Module712.colors.CONTROL_OVERLAY_SECONDARY_BACKGROUND_ACTIVE,
+    marginVertical: Module712.space.PX_8,
+    marginHorizontal: Module712.space.PX_8,
+    marginRight: Module712.space.PX_8 + a0,
+    paddingHorizontal: Module712.space.PX_8,
+    paddingVertical: Module712.space.PX_4,
+    borderRadius: Module712.radii.sm,
+    alignSelf: "flex-end"
+  }
+}));
+const r25 = memo(function MediaModalOverlayAltTextButton(props) {
+  let description = props.description;
+  const styles = useStyles(useSafeAreaInsets_native().right);
+  if (description == null) {
+    description = "";
+  }
+  let c19783_0 = description;
+  return ViewImageDescriptions.useSetting() ? description.length !== 0 ? <PressableOpacity style={styles.container} onPress={() => {
+    let description = c19783_0;
+    if (description == null) {
+      description = "";
+    }
+    openMediaModalOverlayAltTextSheet({
+      description
+    });
+  }} hitSlop={{
+    top: 6,
+    bottom: 6,
+    left: 6,
+    right: 6
+  }}>
+    <Text variant="text-xs/semibold" color="text-overlay-light">
+      {intl.string(t.Q5VqrN)}
+    </Text>
+  </PressableOpacity> : null : null;
+});
+export default r25;

modules/media_viewer/native/components/overlay/MediaModalOverlayAltTextSheet.tsx

@@ -0,0 +1,25 @@
+// Metro module 10899 (f10900).
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import { useMessagePreviewCollapsedheight } from "../../useMessagePreviewHeight";
+import { useIsScreenLandscape } from "../../../../screen/useIsScreenLandscape.native";
+import { BottomSheet } from "../../../../../design/components/Sheet/native/BottomSheet.native";
+import { BottomSheetTitleHeader } from "../../../../../design/components/Sheet/native/BottomSheetTitleHeader.native";
+import { intl, t } from "../../../../../intl/index.native";
+import { Text } from "../../../../../design/components/Text/native/Text";
+const useStyles = createStyles({
+  container: {
+    padding: Module712.space.PX_16
+  }
+});
+export default function MediaViewerAltTextSheet(props) {
+  const description = props.description;
+  const styles = useStyles();
+  const messagePreviewCollapsedheight = useMessagePreviewCollapsedheight();
+  const minHeight = useIsScreenLandscape() ? 70 : messagePreviewCollapsedheight + 20 + 50;
+  return <BottomSheet header={<BottomSheetTitleHeader title={intl.string(t.J3IOO1)} />} contentStyles={[styles.container, {
+    minHeight
+  }]}>
+    <Text accessibilityRole="text" variant="text-md/normal">{description}</Text>
+  </BottomSheet>;
+};

modules/media_viewer/native/components/overlay/MediaModalOverlayFooter.tsx

@@ -0,0 +1,468 @@
+// Metro module 12310 (f12311).
+import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../../_bundle/Module712";
+import * as _ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { useSharedValue, useAnimatedStyle, useAnimatedReaction } from "../../../../reanimated/ReanimatedRexport";
+import { setMesssagePreviewHeight } from "../../useMessagePreviewHeight";
+import * as _timing from "../../../../../design/animation/reanimated/timing/timing";
+import * as _native from "../../../../../design/void/native";
+import useMediaModalFooterBackground_android from "./useMediaModalFooterBackground.android";
+import { Gesture, Directions, GestureDetector } from "../../../../../_bundle/Module5273";
+import REAWorkaroundView from "../../../../reanimated/native/REAWorkaroundView";
+import { SafeAreaPaddingView } from "../../../../../components_native/common/SafeAreaView";
+import { ActionSheetHeaderBar } from "../../../../../design/components/Sheet/native/ActionSheetHeaderBar.native";
+import MediaMessagePreview from "../message_preview/MediaMessagePreview";
+import MediaViewerThumbnails from "../MediaViewerThumbnails";
+let clamp, __initData, __initData2, __initData3, __initData4, __initData5, __initData6, __initData7, __initData8, __initData9, __initData10, __initData11, __initData12, __initData13, __initData14, __initData15;
+const useStyles = createStyles({
+  drawerContainer: {
+    overflow: "hidden",
+    backgroundColor: void 0
+  },
+  drawerHeaderTab: {
+    width: 40,
+    backgroundColor: Module712.unsafe_rawColors.PRIMARY_600
+  },
+  drawerHeader: {
+    backgroundColor: void 0
+  },
+  messagePreviewContainer: {
+    marginLeft: 6
+  },
+  thumbnailsContainer: {
+    paddingTop: 8
+  }
+});
+const NONE = -1;
+const clamp2 = function clamp(a0, a1, a2) {
+  return Math.max(Math.min(a0, a2), a1);
+};
+clamp2.__closure = {};
+clamp2.__workletHash = 10219548303807;
+clamp2.__initData = {
+  code: "function clamp_MediaModalOverlayFooterTsx1(value,min,max){return Math.max(Math.min(value,max),min);}"
+};
+clamp = clamp2;
+__initData = {
+  code: "function MediaModalOverlayFooterTsx2(){const{animationState,NONE,isCollapsed}=this.__closure;animationState.set(NONE);isCollapsed.set(false);}"
+};
+__initData2 = {
+  code: "function MediaModalOverlayFooterTsx3(){const{animationState,NONE,isCollapsed}=this.__closure;animationState.set(NONE);isCollapsed.set(true);}"
+};
+__initData3 = {
+  code: "function MediaModalOverlayFooterTsx4(){const{minFooterHeight,animationState,DRAWER_PANNING,animationDriver,COLLAPSED,interpolate,EXPANDED,EXPANDED_MORE,expandedHeight,MAX_DRAWER_VERTICAL_DRAG}=this.__closure;return{height:minFooterHeight>0&&(animationState.get()===DRAWER_PANNING||animationDriver.get()!==COLLAPSED)?interpolate(animationDriver.get(),[COLLAPSED,EXPANDED,EXPANDED_MORE],[minFooterHeight,Math.max(expandedHeight,minFooterHeight),Math.max(expandedHeight,minFooterHeight)+MAX_DRAWER_VERTICAL_DRAG],'clamp'):undefined,justifyContent:'flex-start'};}"
+};
+__initData4 = {
+  code: "function MediaModalOverlayFooterTsx5(){const{interpolate,animationDriver,COLLAPSED,EXPANDED,thumbnailsElementHeight}=this.__closure;return{opacity:interpolate(animationDriver.get(),[COLLAPSED,EXPANDED],[1,0],'clamp'),height:interpolate(animationDriver.get(),[EXPANDED,COLLAPSED],[0,thumbnailsElementHeight],'clamp')};}"
+};
+__initData5 = {
+  code: "function MediaModalOverlayFooterTsx6(){const{interpolate,animationDriver,COLLAPSED,EXPANDED}=this.__closure;return{height:interpolate(animationDriver.get(),[COLLAPSED,EXPANDED],[0,24],'clamp')};}"
+};
+__initData6 = {
+  code: "function MediaModalOverlayFooterTsx7(){const{r,g,b,interpolate,animationDriver,COLLAPSED,EXPANDED,a,DISMISSED}=this.__closure;return{backgroundColor:\"rgba(\"+r+\", \"+g+\", \"+b+\", \"+interpolate(animationDriver.get(),[COLLAPSED,EXPANDED],[a,1],'clamp')+\")\",paddingVertical:interpolate(animationDriver.get(),[COLLAPSED,EXPANDED],[8,0],'clamp'),transform:[{translateY:interpolate(animationDriver.get(),[DISMISSED,COLLAPSED],[100,0],'clamp')}]};}"
+};
+__initData7 = {
+  code: "function MediaModalOverlayFooterTsx8(){const{runOnJS,onFullViewToggled}=this.__closure;runOnJS(onFullViewToggled)();}"
+};
+__initData8 = {
+  code: "function MediaModalOverlayFooterTsx9(){const{full,animationDriver,withTiming,DISMISSED,STANDARD_EASING,COLLAPSED,runOnJS,onFullViewToggled}=this.__closure;if(!full){animationDriver.set(withTiming(DISMISSED,{duration:350,easing:STANDARD_EASING},'respect-motion-settings',function(){animationDriver.set(COLLAPSED);}));}else{runOnJS(onFullViewToggled)();}}"
+};
+__initData9 = {
+  code: "function MediaModalOverlayFooterTsx10(){const{animationDriver,COLLAPSED}=this.__closure;animationDriver.set(COLLAPSED);}"
+};
+__initData10 = {
+  code: "function MediaModalOverlayFooterTsx11(){const{animationDriver,COLLAPSE_DRAWER_ON_RELEASE,runOnJS,setFull,isCollapsed,COLLAPSED,animationState,withDelay,withTiming,NONE,STANDARD_EASING,EXPANDED}=this.__closure;if(animationDriver.get()<COLLAPSE_DRAWER_ON_RELEASE){runOnJS(setFull)(false);isCollapsed.set(true);if(animationDriver.get()===COLLAPSED){animationState.set(withDelay(150,withTiming(NONE,{duration:0})));}else{animationDriver.set(withTiming(COLLAPSED,{duration:150,easing:STANDARD_EASING},'respect-motion-settings',function(){animationState.set(NONE);}));}}else{runOnJS(setFull)(true);animationDriver.set(withTiming(EXPANDED,{duration:150,easing:STANDARD_EASING},'respect-motion-settings',function(){isCollapsed.set(false);animationState.set(NONE);}));}}"
+};
+__initData11 = {
+  code: "function MediaModalOverlayFooterTsx12({translationY:translationY}){const{animationState,DRAWER_PANNING,clamp,expandedHeight,thumbnailsElementHeight,collapsedHeight,COLLAPSED,EXPANDED,animationDriver,COLLAPSE_DRAWER_DURING_DRAG,runOnJS,setFull,DRAWER_VERTICAL_DRAG_RESISTANCE,MAX_DRAWER_VERTICAL_DRAG,EXPANDED_MORE}=this.__closure;animationState.set(DRAWER_PANNING);if(translationY>0){const animValue=clamp(1-translationY/Math.abs(expandedHeight-(thumbnailsElementHeight+collapsedHeight)),COLLAPSED,EXPANDED);animationDriver.set(animValue);if(animValue<COLLAPSE_DRAWER_DURING_DRAG){runOnJS(setFull)(false);}}else{const scrollAmount=clamp(-translationY/DRAWER_VERTICAL_DRAG_RESISTANCE,0,MAX_DRAWER_VERTICAL_DRAG);animationDriver.set(EXPANDED+(EXPANDED_MORE-EXPANDED)*scrollAmount/MAX_DRAWER_VERTICAL_DRAG);}}"
+};
+__initData12 = {
+  code: "function MediaModalOverlayFooterTsx13(){const{animationState,NONE}=this.__closure;animationState.set(NONE);}"
+};
+__initData13 = {
+  code: "function MediaModalOverlayFooterTsx14(){const{isCollapsed,animationState,NONE}=this.__closure;isCollapsed.set(false);animationState.set(NONE);}"
+};
+__initData14 = {
+  code: "function MediaModalOverlayFooterTsx15(){const{overlayEnabled,animationDriver}=this.__closure;return[overlayEnabled.get(),animationDriver.get()];}"
+};
+__initData15 = {
+  code: "function MediaModalOverlayFooterTsx16([overlayEnabledValue,animationDriverValue]){const{DISMISSED_HIDE_OVERLAY,overlayEnabled}=this.__closure;if(overlayEnabledValue&&animationDriverValue<DISMISSED_HIDE_OVERLAY){overlayEnabled.set(false);}}"
+};
+export function MediaModalOverlayFooter(props) {
+  let sharedValue3, callback, callback2, callback3, c19784_18, c19784_19, c19784_20, c19784_21, ref, ref2, memo, memo2, memo3;
+  const styles = useStyles();
+  const { sliderElement, onFullViewToggled, overlayEnabled, syncer } = props;
+  let r20 = syncer.sources.length > 1;
+  const r0 = r20 ? 60 : 20;
+  let c19784_2 = r0;
+  const thumbnailsElementHeight = r20 ? 60 : 0;
+  const sharedValue = useSharedValue(true);
+  const sharedValue2 = useSharedValue(NONE);
+  const [state, setState] = useState(false);
+  const [state2, setState2] = useState(0);
+  const [state3, setState3] = useState(0);
+  const [state4, setState4] = useState(0);
+  useEffect(() => {
+    setMesssagePreviewHeight({
+      collapsedHeight: state4,
+      expandedHeight: state3
+    });
+  }, [state4, state3]);
+  useEffect(() => {
+    onFullViewToggled(state);
+  }, [state, onFullViewToggled]);
+  sharedValue3 = useSharedValue(0);
+  callback = useCallback(() => {
+    sharedValue2.set(1);
+    setState(true);
+    const r26 = {
+      duration: 250,
+      easing: _native.STANDARD_EASING
+    };
+    const r27 = function t() {
+      sharedValue2.set(NONE);
+      sharedValue.set(false);
+    };
+    r27.__closure = {
+      animationState: sharedValue2,
+      NONE,
+      isCollapsed: sharedValue
+    };
+    r27.__workletHash = 8443967716862;
+    r27.__initData = __initData;
+    sharedValue3.set(_timing.withTiming(1, r26, "respect-motion-settings", r27));
+  }, [sharedValue3, sharedValue2, sharedValue]);
+  callback2 = useCallback(() => {
+    sharedValue2.set(0);
+    setState(false);
+    const r26 = {
+      duration: 250,
+      easing: _native.STANDARD_EASING
+    };
+    const r27 = function t() {
+      sharedValue2.set(NONE);
+      sharedValue.set(true);
+    };
+    r27.__closure = {
+      animationState: sharedValue2,
+      NONE,
+      isCollapsed: sharedValue
+    };
+    r27.__workletHash = 12593758327764;
+    r27.__initData = __initData2;
+    sharedValue3.set(_timing.withTiming(0, r26, "respect-motion-settings", r27));
+  }, [sharedValue3, sharedValue2, sharedValue]);
+  callback3 = useCallback(() => {
+    if (sharedValue2.get() === NONE && !(sharedValue.get() && state3 === state2)) {
+      if (sharedValue.get()) {
+        callback();
+      } else {
+        callback2();
+      }
+    }
+  }, [sharedValue2, sharedValue, state3, state2, callback, callback2]);
+  const callback5 = useCallback((a0) => {
+    setState3(a0 + 17);
+  }, [setState3]);
+  const callback4 = useCallback((a0) => {
+    setState2(a0 + 17);
+  }, [setState2]);
+  const ee = function ee() {
+    let height;
+    L4: {
+      const r3 = state4 > 0;
+      height = void 0;
+      if (r3) {
+        if (sharedValue2.get() !== 2) {
+          const r22 = sharedValue3.get();
+          height = void 0;
+          if (r22 === 0) {
+            break L4;
+          }
+        }
+        height = _ReanimatedRexport.interpolate(sharedValue3.get(), [0, 1, 2], [state4, Math.max(state3, state4), Math.max(state3, state4) + 40], "clamp");
+      }
+    }
+    return {
+      height,
+      justifyContent: "flex-start"
+    };
+  };
+  ee.__closure = {
+    minFooterHeight: state4,
+    animationState: sharedValue2,
+    DRAWER_PANNING: 2,
+    animationDriver: sharedValue3,
+    COLLAPSED: 0,
+    interpolate: _ReanimatedRexport.interpolate,
+    EXPANDED: 1,
+    EXPANDED_MORE: 2,
+    expandedHeight: state3,
+    MAX_DRAWER_VERTICAL_DRAG: 40
+  };
+  ee.__workletHash = 10727625692479;
+  ee.__initData = __initData3;
+  const animatedStyle3 = useAnimatedStyle(ee);
+  const te = function te() {
+    return {
+      opacity: _ReanimatedRexport.interpolate(sharedValue3.get(), [0, 1], [1, 0], "clamp"),
+      height: _ReanimatedRexport.interpolate(sharedValue3.get(), [1, 0], [0, thumbnailsElementHeight], "clamp")
+    };
+  };
+  te.__closure = {
+    interpolate: _ReanimatedRexport.interpolate,
+    animationDriver: sharedValue3,
+    COLLAPSED: 0,
+    EXPANDED: 1,
+    thumbnailsElementHeight
+  };
+  te.__workletHash = 9896169174287;
+  te.__initData = __initData4;
+  const animatedStyle = useAnimatedStyle(te);
+  const callback6 = useCallback((a0) => {
+    const height = a0.nativeEvent.layout.height;
+    if (height > c19784_2 && sharedValue.get() && sharedValue2.get() === NONE) {
+      setState4(height);
+    }
+  }, [setState4, r0, sharedValue, sharedValue2]);
+  const ae = function ae() {
+    return {
+      height: _ReanimatedRexport.interpolate(sharedValue3.get(), [0, 1], [0, 24], "clamp")
+    };
+  };
+  ae.__closure = {
+    interpolate: _ReanimatedRexport.interpolate,
+    animationDriver: sharedValue3,
+    COLLAPSED: 0,
+    EXPANDED: 1
+  };
+  ae.__workletHash = 13288648164744;
+  ae.__initData = __initData5;
+  const animatedStyle2 = useAnimatedStyle(ae);
+  const mediaModalFooterBackground_android = useMediaModalFooterBackground_android();
+  const mediaModalFooterBackgroundColorRgba = mediaModalFooterBackground_android.mediaModalFooterBackgroundColorRgba;
+  const r31 = mediaModalFooterBackgroundColorRgba.r;
+  c19784_18 = r31;
+  const r30 = mediaModalFooterBackgroundColorRgba.g;
+  c19784_19 = r30;
+  const r29 = mediaModalFooterBackgroundColorRgba.b;
+  c19784_20 = r29;
+  const r25 = mediaModalFooterBackgroundColorRgba.a;
+  c19784_21 = r25;
+  const MediaModalFooterUnderlay = mediaModalFooterBackground_android.MediaModalFooterUnderlay;
+  const ie = function ie() {
+    return {
+      backgroundColor: `rgba(${c19784_18}, ${c19784_19}, ${c19784_20}, ${_ReanimatedRexport.interpolate(sharedValue3.get(), [0, 1], [c19784_21, 1], "clamp")})`,
+      paddingVertical: _ReanimatedRexport.interpolate(sharedValue3.get(), [0, 1], [8, 0], "clamp"),
+      transform: [{
+        translateY: _ReanimatedRexport.interpolate(sharedValue3.get(), [-1, 0], [100, 0], "clamp")
+      }]
+    };
+  };
+  ie.__closure = {
+    r: r31,
+    g: r30,
+    b: r29,
+    interpolate: _ReanimatedRexport.interpolate,
+    animationDriver: sharedValue3,
+    COLLAPSED: 0,
+    EXPANDED: 1,
+    a: r25,
+    DISMISSED: -1
+  };
+  ie.__workletHash = 1645059598385;
+  ie.__initData = __initData6;
+  const animatedStyle4 = useAnimatedStyle(ie);
+  ref = useRef(void 0);
+  ref2 = useRef(void 0);
+  const [state5, setScrollViewIsAtTop] = useState(true);
+  memo = useMemo(() => {
+    const r18 = Gesture.Fling().direction(Directions.UP);
+    const r20 = function t() {
+      _ReanimatedRexport.runOnJS(callback3)();
+    };
+    r20.__closure = {
+      runOnJS: _ReanimatedRexport.runOnJS,
+      onFullViewToggled: callback3
+    };
+    r20.__workletHash = 1612404502942;
+    r20.__initData = __initData7;
+    return r18.onStart(r20).withRef(ref).enabled(state ? !state : state3 > state2);
+  }, [state2, state3, state, callback3]);
+  memo2 = useMemo(() => {
+    const r18 = Gesture.Fling().direction(Directions.DOWN);
+    const r20 = function t() {
+      if (state) {
+        _ReanimatedRexport.runOnJS(callback3)();
+      } else {
+        const r8 = {
+          duration: 350,
+          easing: _native.STANDARD_EASING
+        };
+        const r23 = function t() {
+          sharedValue3.set(0);
+        };
+        r23.__closure = {
+          animationDriver: sharedValue3,
+          COLLAPSED: 0
+        };
+        r23.__workletHash = 15839049590506;
+        r23.__initData = __initData9;
+        sharedValue3.set(_timing.withTiming(-1, r8, "respect-motion-settings", r23));
+      }
+    };
+    r20.__closure = {
+      full: state,
+      animationDriver: sharedValue3,
+      withTiming: _timing.withTiming,
+      DISMISSED: -1,
+      STANDARD_EASING: _native.STANDARD_EASING,
+      COLLAPSED: 0,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      onFullViewToggled: callback3
+    };
+    r20.__workletHash = 16686210274151;
+    r20.__initData = __initData8;
+    return r18.onStart(r20).withRef(ref2).enabled(state5);
+  }, [sharedValue3, state, callback3, state5]);
+  memo3 = useMemo(() => {
+    const r20 = Gesture.Pan().maxPointers(1).activeOffsetY([-10, 10]);
+    const r22 = function a({ translationY }) {
+      sharedValue2.set(2);
+      if (translationY > 0) {
+        const r53 = Math.max(Math.min(1 - translationY / Math.abs(state3 - (thumbnailsElementHeight + state2)), 1), 0);
+        sharedValue3.set(r53);
+        if (r53 < 0.4) {
+          _ReanimatedRexport.runOnJS(setState)(false);
+        }
+      } else {
+        sharedValue3.set(1 + 1 * Math.max(Math.min(-translationY / 3, 40), 0) / 40);
+      }
+    };
+    r22.__closure = {
+      animationState: sharedValue2,
+      DRAWER_PANNING: 2,
+      clamp,
+      expandedHeight: state3,
+      thumbnailsElementHeight,
+      collapsedHeight: state2,
+      COLLAPSED: 0,
+      EXPANDED: 1,
+      animationDriver: sharedValue3,
+      COLLAPSE_DRAWER_DURING_DRAG: 0.4,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      setFull: setState,
+      DRAWER_VERTICAL_DRAG_RESISTANCE: 3,
+      MAX_DRAWER_VERTICAL_DRAG: 40,
+      EXPANDED_MORE: 2
+    };
+    r22.__workletHash = 7012168718409;
+    r22.__initData = __initData11;
+    const r31 = r20.onUpdate(r22);
+    const r33 = function t() {
+      if (sharedValue3.get() < 0.75) {
+        _ReanimatedRexport.runOnJS(setState)(false);
+        sharedValue.set(true);
+        if (sharedValue3.get() === 0) {
+          sharedValue2.set(_ReanimatedRexport.withDelay(150, _timing.withTiming(NONE, {
+            duration: 0
+          })));
+        } else {
+          const r72 = {
+            duration: 150,
+            easing: _native.STANDARD_EASING
+          };
+          const r73 = function a() {
+            sharedValue2.set(NONE);
+          };
+          r73.__closure = {
+            animationState: sharedValue2,
+            NONE
+          };
+          r73.__workletHash = 15486611138793;
+          r73.__initData = __initData12;
+          sharedValue3.set(_timing.withTiming(0, r72, "respect-motion-settings", r73));
+        }
+      } else {
+        _ReanimatedRexport.runOnJS(setState)(true);
+        const r34 = {
+          duration: 150,
+          easing: _native.STANDARD_EASING
+        };
+        const r35 = function t() {
+          sharedValue.set(false);
+          sharedValue2.set(NONE);
+        };
+        r35.__closure = {
+          isCollapsed: sharedValue,
+          animationState: sharedValue2,
+          NONE
+        };
+        r35.__workletHash = 8502240261161;
+        r35.__initData = __initData13;
+        sharedValue3.set(_timing.withTiming(1, r34, "respect-motion-settings", r35));
+      }
+    };
+    r33.__closure = {
+      animationDriver: sharedValue3,
+      COLLAPSE_DRAWER_ON_RELEASE: 0.75,
+      runOnJS: _ReanimatedRexport.runOnJS,
+      setFull: setState,
+      isCollapsed: sharedValue,
+      COLLAPSED: 0,
+      animationState: sharedValue2,
+      withDelay: _ReanimatedRexport.withDelay,
+      withTiming: _timing.withTiming,
+      NONE,
+      STANDARD_EASING: _native.STANDARD_EASING,
+      EXPANDED: 1
+    };
+    r33.__workletHash = 16268892990477;
+    r33.__initData = __initData10;
+    return r31.onEnd(r33).enabled(state);
+  }, [sharedValue3, sharedValue2, state2, state3, state, sharedValue, thumbnailsElementHeight]);
+  const oe = () => [overlayEnabled.get(), sharedValue3.get()];
+  oe.__closure = {
+    overlayEnabled,
+    animationDriver: sharedValue3
+  };
+  oe.__workletHash = 12659996728578;
+  oe.__initData = __initData14;
+  const ne = function ne(a0) {
+    let [r23, r24] = a0;
+    if (r23) {
+      r23 = r24 < -0.25;
+    }
+    if (r23) {
+      overlayEnabled.set(false);
+    }
+  };
+  ne.__closure = {
+    DISMISSED_HIDE_OVERLAY: -0.25,
+    overlayEnabled
+  };
+  ne.__workletHash = 11470550406895;
+  ne.__initData = __initData15;
+  useAnimatedReaction(oe, ne);
+  const memo4 = useMemo(() => Gesture.Exclusive(memo, memo3, memo2), [memo3, memo2, memo]);
+  const r189 = [MediaModalFooterUnderlay, ,];
+  const r206 = [<REAWorkaroundView style={[animatedStyle2, styles.drawerContainer]}>
+    <ActionSheetHeaderBar tabStyle={styles.drawerHeaderTab} style={styles.drawerHeader} />
+  </REAWorkaroundView>, sliderElement, ,];
+  const r222 = [<View style={styles.messagePreviewContainer}>
+    <MediaMessagePreview channelId={props.channelId} messageId={props.messageId} onClose={props.onClose} onTapMessage={callback3} onMeasureFullHeight={callback5} onMeasureCollapsedHeight={callback4} full={state} canExpand={state3 > state2} setScrollViewIsAtTop={setScrollViewIsAtTop} flingUpRef={ref} flingDownRef={ref2} animationDriver={sharedValue3} />
+  </View>, ,];
+  if (r20) {
+    r20 = <REAWorkaroundView style={[animatedStyle, styles.thumbnailsContainer]}>
+      <MediaViewerThumbnails syncer={syncer} />
+    </REAWorkaroundView>;
+  }
+  r222[1] = r20;
+  r206[2] = <REAWorkaroundView onLayout={callback6} style={animatedStyle3}>{r222}</REAWorkaroundView>;
+  r189[1] = <SafeAreaPaddingView bottom left right>{r206}</SafeAreaPaddingView>;
+  return <GestureDetector gesture={memo4}>
+    <REAWorkaroundView style={animatedStyle4}>{r189}</REAWorkaroundView>
+  </GestureDetector>;
+}

modules/media_viewer/native/components/overlay/MediaModalOverlayHeader.tsx

@@ -0,0 +1,101 @@
+// Metro module 12304 (f12305).
+import { StyleSheet, View } from "react-native";
+import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
+import { NAV_BAR_HEIGHT } from "../../../../../design/components/Navigator/native/NavigatorConstants.native";
+import { useHeaderLayoutAnimation } from "../../useOverlayLayoutDriver";
+import { useMediaShareActions } from "../MediaShareActions";
+import useShouldHideMediaOptions from "../../../../media_channel/useShouldHideMediaOptions";
+import ReanimatedRexport from "../../../../reanimated/ReanimatedRexport";
+import { SafeAreaPaddingView } from "../../../../../components_native/common/SafeAreaView";
+import MediaViewerOverlayButton from "./MediaViewerOverlayButton";
+import { intl, t } from "../../../../../intl/index.native";
+import { XSmallIcon } from "../../../../../design/components/Icon/native/redesign/generated/XSmallIcon";
+import { Icon } from "../../../../../design/void/native";
+import Module712 from "../../../../../_bundle/Module712";
+import { Text } from "../../../../../design/components/Text/native/Text";
+import MediaViewerOverlayButtonFavoriteGIF from "./MediaViewerOverlayButtonFavoriteGIF";
+import { ContextMenu } from "../../../../../design/components/ContextMenu/native/ContextMenu.native";
+import { isAndroid } from "../../../../../utils/PlatformUtils";
+import { MoreVerticalIcon } from "../../../../../design/components/Icon/native/redesign/generated/MoreVerticalIcon";
+import { MoreHorizontalIcon } from "../../../../../design/components/Icon/native/redesign/generated/MoreHorizontalIcon";
+const useStyles = createStyles({
+  navbarInner: {
+    flex: 1,
+    alignItems: "center",
+    flexDirection: "row",
+    height: NAV_BAR_HEIGHT,
+    paddingHorizontal: 6,
+    justifyContent: "space-between"
+  },
+  navbarLeft: {
+    flexShrink: 1,
+    flexDirection: "row",
+    marginRight: 8
+  },
+  navbarRight: {
+    flexShrink: 0,
+    justifyContent: "flex-end",
+    flexDirection: "row",
+    gap: 8
+  },
+  navbarName: {
+    flexShrink: 1,
+    alignItems: "center",
+    height: 40,
+    marginLeft: 8
+  },
+  navbarNameInner: {
+    borderRadius: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.7)",
+    flex: 1,
+    flexDirection: "row",
+    paddingHorizontal: 18
+  },
+  navbarNameShrinkWrapper: {
+    flexShrink: 1
+  },
+  contextIcon: {
+    width: 18,
+    height: 18,
+    marginRight: 6
+  }
+});
+export function MediaModalOverlayHeader(props) {
+  const { onClose, source, disableDownload, disableMediaOverlayButton, shareable, contextName, contextIcon, animationDriver, channelId } = props;
+  const styles = useStyles();
+  const headerLayoutAnimation = useHeaderLayoutAnimation(animationDriver);
+  const mediaShareActions = useMediaShareActions({
+    source,
+    disableDownload,
+    shareable
+  });
+  const shouldHideMediaOptions = useShouldHideMediaOptions(channelId);
+  return <ReanimatedRexport.View style={[{
+    ...StyleSheet.absoluteFillObject,
+    bottom: void 0
+  }, headerLayoutAnimation]}>
+    <SafeAreaPaddingView top left right pointerEvents="box-none">
+      <View style={styles.navbarInner} pointerEvents="box-none">
+        <View style={styles.navbarLeft}>
+          <MediaViewerOverlayButton accessibilityLabel={intl.string(t.cpT0Cq)} icon={<XSmallIcon size="md" color="interactive-text-active" />} onPress={onClose} />
+          {contextName != null && <View style={styles.navbarName}>
+            <View style={styles.navbarNameInner}>
+              {contextIcon != null && <Icon source={contextIcon} color={Module712.unsafe_rawColors.PRIMARY_345} size={Icon.Sizes.CUSTOM} style={styles.contextIcon} />}
+              <View style={styles.navbarNameShrinkWrapper}>
+                <Text accessibilityRole="header" variant="heading-md/medium" lineClamp={1} ellipsizeMode="tail" color="text-overlay-light">{contextName}</Text>
+              </View>
+            </View>
+          </View>}
+        </View>
+        {shouldHideMediaOptions ? !shouldHideMediaOptions : <View style={styles.navbarRight}>
+          <MediaViewerOverlayButtonFavoriteGIF source={source} />
+          {disableMediaOverlayButton ? null : <ContextMenu items={mediaShareActions}>
+            {({ ref, ...props }) => <MediaViewerOverlayButton accessibilityLabel={intl.string(t.PdRCRg)} icon={isAndroid() ? <MoreVerticalIcon size="md" color="interactive-text-active" /> : <MoreHorizontalIcon size="md" color="interactive-text-active" />} ref={ref} {...props} />}
+          </ContextMenu>}
+        </View>}
+      </View>
+    </SafeAreaPaddingView>
+  </ReanimatedRexport.View>;
+}

modules/media_viewer/native/components/overlay/MediaViewerOverlayButton.tsx

@@ -0,0 +1,7 @@
+// Metro module 12305 (f12306).
+import { forwardRef } from "react";
+import { IconButton } from "../../../../../design/components/Button/native/IconButton.native";
+const r19 = forwardRef(function(a0, a1) {
+  return <IconButton ref={a1} size="md" variant="secondary-overlay" {...a0} />;
+});
+export default r19;

modules/media_viewer/native/components/overlay/MediaViewerOverlayButtonFavoriteGIF.tsx

@@ -0,0 +1,66 @@
+// Metro module 12306 (f12307).
+import { memo, useCallback } from "react";
+import { useIsFavoriteGIF } from "../../../../gif_picker/FavoriteGIFHooks";
+import { gifUrlKey, removeFavoriteGIF, addFavoriteGIF } from "../../../../../actions/GIFPickerActionCreators";
+import ToastActionCreators from "../../../../toast/native/ToastActionCreators";
+import { intl, t } from "../../../../../intl/index.native";
+import { GifIcon } from "../../../../../design/components/Icon/native/redesign/generated/GifIcon";
+import { getGIFThumbnailForFavorite } from "../../../../../utils/GIFPickerUtils";
+import { GIFType } from "../../../../../_bundle/Module1341";
+import { isAnimatedImageSource } from "../../MediaSourceUtil";
+import MediaViewerOverlayButton from "./MediaViewerOverlayButton";
+import { StarIcon } from "../../../../../design/components/Icon/native/redesign/generated/StarIcon";
+import Module712 from "../../../../../_bundle/Module712";
+import { StarOutlineIcon } from "../../../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
+const r20 = memo(function GIFFavButton(props) {
+  let r34;
+  let uri, isFavoriteGIF;
+  const source = props.source;
+  uri = void 0;
+  isFavoriteGIF = void 0;
+  let r11 = source.isGIFV ? source.embedURI : source.sourceURI;
+  if (r11 == null) {
+    r11 = source.uri;
+  }
+  L14: {
+    uri = r11;
+    isFavoriteGIF = useIsFavoriteGIF(gifUrlKey(uri));
+    const callback = useCallback(() => {
+      if (isFavoriteGIF) {
+        removeFavoriteGIF(uri);
+        ToastActionCreators.open({
+          key: "REMOVED_FROM_FAVORITES",
+          content: intl.string(t.in1rga),
+          IconComponent: GifIcon
+        });
+      } else {
+        addFavoriteGIF({
+          url: uri,
+          src: source.uri,
+          gifSrc: getGIFThumbnailForFavorite({
+            providerName: source.embedProviderName,
+            thumbnail: source.thumbnail
+          }),
+          width: source.width,
+          height: source.height,
+          format: source.isGIFV ? GIFType.VIDEO : GIFType.IMAGE
+        });
+        ToastActionCreators.open({
+          key: "ADDED_TO_FAVORITES",
+          content: intl.string(t.okQonm),
+          IconComponent: GifIcon
+        });
+      }
+    }, [isFavoriteGIF, source.embedProviderName, source.height, source.isGIFV, source.thumbnail, source.uri, source.width, uri]);
+    if (!isAnimatedImageSource(source)) {
+      const isGIFV = source.isGIFV;
+      r34 = null;
+      if (!isGIFV) {
+        break L14;
+      }
+    }
+    r34 = <MediaViewerOverlayButton accessibilityLabel={isFavoriteGIF ? intl.string(t["5/NS74"]) : intl.string(t.nIH0v8)} onPress={callback} icon={isFavoriteGIF ? <StarIcon color={Module712.unsafe_rawColors.YELLOW_300} size="md" /> : <StarOutlineIcon color="interactive-text-default" size="md" />} />;
+  }
+  return r34;
+});
+export default r20;

modules/media_viewer/native/components/overlay/openMediaModalOverlayAltTextSheet.tsx

@@ -0,0 +1,7 @@
+// Metro module 10898 (f10899).
+import ActionSheetActionCreators from "../../../../action_sheet/native/ActionSheetActionCreators";
+export default function openMediaModalOverlayAltTextSheet({ description }) {
+  ActionSheetActionCreators.openLazy(import("./MediaModalOverlayAltTextSheet"), "MediaModalOverlayAltTextSheet", {
+    description
+  });
+};

modules/media_viewer/native/components/overlay/useMediaModalFooterBackground.android.tsx

@@ -0,0 +1,17 @@
+// Metro module 12311 (f12312).
+import _slicedToArray from "../../../../../_bundle/_slicedToArray";
+import Module689 from "../../../../../_bundle/Module689";
+import { useToken } from "../../../../../design/tokens/native/useToken";
+import Module712 from "../../../../../_bundle/Module712";
+export default function useMediaModalFooterBackground() {
+  const r20 = _slicedToArray(Module689(useToken(Module712.colors.THEME_LOCKED_BLUR_FALLBACK)).rgba(), 4);
+  return {
+    mediaModalFooterBackgroundColorRgba: {
+      r: r20[0],
+      g: r20[1],
+      b: r20[2],
+      a: r20[3]
+    },
+    MediaModalFooterUnderlay: void 0
+  };
+};