discord-decomp/modules/calls/native/VideoBackground.tsx

// Metro module 7980 (f7981).
import _slicedToArray from "../../../_bundle/_slicedToArray";
import { useState, useEffect, memo } from "react";
import { Image as Image2, NativeModules, View } from "react-native";
import { EMPTY_STRING_SNOWFLAKE_ID, NOOP } from "../../../Constants";
import { createStyles } from "../../../design/components/Styles/native/createStyles";
import Module12 from "../../../_bundle/Module12";
import useGetIsMounted from "../../../hooks/useGetIsMounted";
import VideoBackgroundManager from "./VideoBackgroundManager";
import { hexToRgb } from "../../../utils/ColorUtils";
import Module712 from "../../../_bundle/Module712";
import MobileVisualRefreshExperiment from "../../themes/experiments/MobileVisualRefreshExperiment";
import useDisplayProfile from "../../user_profile/hooks/useDisplayProfile";
import { useVideoTileGradientColors } from "./useVideoTileGradientColors";
import maybeFetchUserProfile from "../../user_profile/maybeFetchUserProfile";
import * as _native from "../../../design/void/native";
import { Avatar } from "../../../design/void/native";
import Module4611 from "../../../_bundle/Module4611";
let useStyles, c5046_13;
const useDominantRGBFromImage = function useDominantRGBFromImage(url, source) {
  let c16141_1 = source;
  const isArray = Array.isArray(source);
  let r11 = source;
  if (isArray) {
    const r18 = source[0];
    c16141_1 = r18;
    r11 = r18;
  }
  const getIsMounted = useGetIsMounted();
  let c16141_2 = getIsMounted;
  let r23 = url != null ? VideoBackgroundManager.cachedDominantColors[url] : void 0;
  if (r23 == null) {
    r23 = hexToRgb(Module712.unsafe_rawColors.PRIMARY_800);
  }
  const [state, setState] = useState(r23);
  useEffect(() => {
    if (c16141_1 != null && url != null) {
      if (VideoBackgroundManager.cachedDominantColors[url] == null) {
        (typeof c16141_1 === "number" ? NativeModules.ImageManager.getDominantColorsLocalAsset(Image2.resolveAssetSource(c16141_1)) : NativeModules.ImageManager.getDominantColors(Image2.resolveAssetSource(c16141_1))).then((result) => {
          if (c16141_2()) {
            const r10 = _slicedToArray(result[0], 3);
            const r11 = {
              r: r10[0],
              g: r10[1],
              b: r10[2]
            };
            setState(r11);
            VideoBackgroundManager.cachedDominantColors[url] = r11;
          }
        }).catch(NOOP);
      } else {
        setState(VideoBackgroundManager.cachedDominantColors[url]);
      }
    }
  }, [r11, url, getIsMounted]);
  return state;
};
const VideoBackground = function VideoBackground(props) {
  const { style, url, isStageCall = false, avatarStyle, user, guildId, renderVideoDetails, ...props2 } = props;
  const styles = useStyles();
  const source = c5046_13(url);
  const dominantRGBFromImage = useDominantRGBFromImage(url, source);
  const backgroundColor = `rgb(${dominantRGBFromImage.r}, ${dominantRGBFromImage.g}, ${dominantRGBFromImage.b})`;
  const r23 = MobileVisualRefreshExperiment("VideoBackground-native");
  let c16142_1 = r23;
  let r46 = user?.id;
  if (r46 == null) {
    r46 = EMPTY_STRING_SNOWFLAKE_ID;
  }
  const EMPTY_STRING_SNOWFLAKE_ID2 = r46;
  const displayProfile = useDisplayProfile(EMPTY_STRING_SNOWFLAKE_ID2, guildId);
  const r50 = displayProfile == null;
  let r51 = void 0;
  if (!r50) {
    const themeColors = displayProfile.themeColors;
    r51 = themeColors == null ? void 0 : themeColors[0];
  }
  if (r51 == null) {
    r51 = null;
  }
  const r54 = displayProfile == null;
  let r24 = void 0;
  if (!r54) {
    const themeColors2 = displayProfile.themeColors;
    r24 = themeColors2 == null ? void 0 : themeColors2[1];
  }
  if (r24 == null) {
    r24 = null;
  }
  const r57 = r23 && r51 != null && r24 != null;
  const videoTileGradientColors = useVideoTileGradientColors(r57 ? r51 : null, r57 ? r24 : null);
  useEffect(() => {
    if (EMPTY_STRING_SNOWFLAKE_ID2 !== EMPTY_STRING_SNOWFLAKE_ID && c16142_1) {
      maybeFetchUserProfile(EMPTY_STRING_SNOWFLAKE_ID2, void 0, {
        guildId,
        dispatchWait: true
      });
    }
  }, [r23, EMPTY_STRING_SNOWFLAKE_ID2, guildId]);
  if (source == null) {
    return null;
  }
  let r68 = renderVideoDetails == null ? void 0 : renderVideoDetails();
  if (r68 == null) {
    r68 = null;
  }
  const style2 = [style, styles.videoBackground, r57 ? null : {
    backgroundColor
  }, r68 != null ? styles.videoDetailsSpacer : null];
  const r86 = <Avatar source={source} {...props2} avatarStyle={[avatarStyle, isStageCall ? r57 ? null : {
    backgroundColor
  } : null]} isStageCall={isStageCall} />;
  return videoTileGradientColors != null ? <Module4611 colors={videoTileGradientColors} start={{
    x: 0,
    y: 0
  }} end={{
    x: 0,
    y: 1
  }} style={style2}>
    {r86}
    {r68}
  </Module4611> : <View style={style2}>
    {r86}
    {r68}
  </View>;
};
useStyles = createStyles({
  videoBackground: {
    alignItems: "center"
  },
  videoDetailsSpacer: {
    paddingTop: 12
  }
});
c5046_13 = Module12.memoize((a0) => a0 == null ? null : a0 !== "" ? typeof a0 !== "number" ? {
  uri: a0
} : a0 : null);
VideoBackground.AvatarSizes = _native.AvatarSizes;
const r48 = memo(VideoBackground);
export default r48;
export const AvatarSizes = _native.AvatarSizes;
export { c5046_13 as memoizedImageSource };
export { useDominantRGBFromImage };
export function useDominantColorFromImage(a0, a1) {
  const dominantRGBFromImage = useDominantRGBFromImage(a0, a1);
  return `rgb(${dominantRGBFromImage.r}, ${dominantRGBFromImage.g}, ${dominantRGBFromImage.b})`;
}