discord-decomp/modules/quests/native/QuestDock/QuestDockUnenrolledBackground.tsx

// Metro module 14218 (f14219).
import * as Module19 from "react";
import { useContext, useMemo, useState, useEffect, useCallback } from "react";
import { AppState, StyleSheet } from "react-native";
import AccessibilityStore from "../../../a11y/AccessibilityStore";
import { QuestDockMode } from "../../QuestConstants";
import { QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED, QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED, QUEST_DOCK_EXPANDED_HEIGHT } from "./QuestDockConstants";
import { VerticalGradient } from "../../../../Constants";
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
import QuestDockContext from "./QuestDockContext";
import { useQuestDockHeroAsset } from "../QuestHooks.native";
import { QuestDockGestureContext } from "./QuestDockGestureContext";
import { QuestDockExternalCoordinationContext } from "./QuestDockExternalCoordinationContext";
import useStateFromSharedValue from "../../../reanimated/native/useStateFromSharedValue";
import { useStateFromStores } from "../../../../_bundle/Module589";
import { useToken } from "../../../../design/tokens/native/useToken";
import Module712 from "../../../../_bundle/Module712";
import Module689 from "../../../../_bundle/Module689";
import { useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
import * as _spring from "../../../../design/animation/reanimated/spring/spring";
import { isIOS, isAndroid } from "../../../../utils/PlatformUtils";
import { isHeroVideoSupported } from "../QuestUtils.native";
import ReanimatedNativeView from "../../../core/native/ReanimatedNativeView";
import { VideoComponent } from "../../../../components_native/common/Video";
import FastImage from "../../../../components_native/common/FastImage";
import Module4611 from "../../../../_bundle/Module4611";
const useStyles = createStyles({
  backgroundWrapper: {
    ...StyleSheet.absoluteFillObject,
    right: void 0,
    bottom: void 0,
    height: QUEST_DOCK_EXPANDED_HEIGHT,
    zIndex: 1
  },
  backgroundHeroAsset: {
    ...StyleSheet.absoluteFillObject,
    height: QUEST_DOCK_EXPANDED_HEIGHT,
    resizeMode: "cover"
  },
  backgroundHeroAssetVideo: {
    ...StyleSheet.absoluteFillObject
  },
  backgroundGradient: {
    ...StyleSheet.absoluteFillObject,
    height: QUEST_DOCK_EXPANDED_HEIGHT
  }
});
const __initData = {
  code: "function QuestDockUnenrolledBackgroundTsx1(){const{withSpring,activeQuestDockMode,QuestDockMode,QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED,QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED,windowDimensions}=this.__closure;return{transform:[{translateX:withSpring(activeQuestDockMode.get()===QuestDockMode.COLLAPSED?QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED*-1:0,QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)},{translateY:withSpring(activeQuestDockMode.get()===QuestDockMode.COLLAPSED?QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED*-1:0,QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)}],width:windowDimensions.get().width};}"
};
const __initData2 = {
  code: "function QuestDockUnenrolledBackgroundTsx2(){const{withSpring,activeQuestDockMode,QuestDockMode,videoLoaded,QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED}=this.__closure;return{opacity:withSpring(activeQuestDockMode.get()!==QuestDockMode.EXPANDED||!videoLoaded?1:0,QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)};}"
};
const r66 = Module19.memo(function QuestDockUnenrolledBackground() {
  let token;
  const quest = useContext(QuestDockContext).quest;
  const styles = useStyles();
  const questDockHeroAsset = useQuestDockHeroAsset(quest);
  const { staticUrl, videoAsset } = questDockHeroAsset;
  const context = useContext(QuestDockGestureContext);
  const { activeQuestDockMode, windowDimensions } = context;
  const setRestingQuestDockMode = useContext(QuestDockExternalCoordinationContext).setRestingQuestDockMode;
  const stateFromSharedValue = useStateFromSharedValue(activeQuestDockMode);
  const stateFromStores = useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion);
  token = useToken(Module712.colors.CARD_BACKGROUND_DEFAULT);
  const memo = useMemo(() => {
    const r4 = Module689(token);
    return [r4.alpha(0).hex(), r4.alpha(0.1).hex(), r4.alpha(0.8).hex(), r4.alpha(1).hex()];
  }, [token]);
  const memo2 = useMemo(() => [0, 0.33, 0.76, 1], []);
  const r68 = () => ({
    transform: [{
      translateX: _spring.withSpring(activeQuestDockMode.get() === QuestDockMode.COLLAPSED ? -1 * QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED : 0, QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)
    }, {
      translateY: _spring.withSpring(activeQuestDockMode.get() === QuestDockMode.COLLAPSED ? -1 * QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED : 0, QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)
    }],
    width: windowDimensions.get().width
  });
  r68.__closure = {
    withSpring: _spring.withSpring,
    activeQuestDockMode,
    QuestDockMode,
    QUEST_DOCK_UNENROLLED_HEADER_INSET_EXPANDED,
    QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED,
    windowDimensions
  };
  r68.__workletHash = 3565242281634;
  r68.__initData = __initData;
  const animatedStyle = useAnimatedStyle(r68);
  const [state2, setState] = useState(AppState.currentState !== "active");
  useEffect(() => {
    let c27703_0 = AppState.addEventListener("change", (a0) => {
      const r1 = a0 !== "active";
      setState(r1);
      if (isIOS() && r1 && activeQuestDockMode.get() === QuestDockMode.EXPANDED) {
        setRestingQuestDockMode(QuestDockMode.COLLAPSED);
      }
    });
    return () => {
      c27703_0.remove();
    };
  }, [activeQuestDockMode, setRestingQuestDockMode]);
  const isRendered = useContext(QuestDockContext).isRendered;
  const r94 = (state2 ? !state2 : isRendered) && !stateFromStores && videoAsset != null && !isAndroid() && isHeroVideoSupported(videoAsset);
  const [state, setState2] = useState(false);
  const callback = useCallback(() => {
    setState2(true);
  }, []);
  const G = () => ({
    opacity: _spring.withSpring(activeQuestDockMode.get() === QuestDockMode.EXPANDED ? state ? 0 : 1 : 1, QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED)
  });
  G.__closure = {
    withSpring: _spring.withSpring,
    activeQuestDockMode,
    QuestDockMode,
    videoLoaded: state,
    QUEST_DOCK_MODE_CHANGE_PHYSICS_CLAMPED
  };
  G.__workletHash = 13084905891385;
  G.__initData = __initData2;
  const animatedStyle2 = useAnimatedStyle(G);
  return <ReanimatedNativeView style={[styles.backgroundWrapper, animatedStyle]}>
    {r94 ? <>
      <VideoComponent style={styles.backgroundHeroAssetVideo} onLoad={callback} source={{
        uri: videoAsset.url
      }} paused={stateFromSharedValue !== QuestDockMode.EXPANDED} resizeMode="cover" muted disableFocus preventsDisplaySleepDuringVideoPlayback={false} />
      <ReanimatedNativeView style={animatedStyle2}>
        <FastImage style={styles.backgroundHeroAsset} source={{
          uri: staticUrl
        }} />
      </ReanimatedNativeView>
    </> : <FastImage style={styles.backgroundHeroAsset} source={{
      uri: staticUrl
    }} />}
    <Module4611 locations={memo2} style={styles.backgroundGradient} start={VerticalGradient.START} end={VerticalGradient.END} colors={memo} />
  </ReanimatedNativeView>;
});
export default r66;