425 lines
14 KiB
TypeScript
425 lines
14 KiB
TypeScript
// Metro module 4719 (f4720).
|
|
import { useEffect } from "react";
|
|
import { View } from "react-native";
|
|
import ClientThemesBackgroundStore from "../ClientThemesBackgroundStore";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import * as _shared from "../../../design/shared";
|
|
import Color from "../../../utils/Color";
|
|
import { hexToRgb, mixColors, hexWithOpacity } from "../../../utils/ColorUtils";
|
|
import useWindowDimensions_native from "../../screen/useWindowDimensions.native";
|
|
import Module4611 from "../../../_bundle/Module4611";
|
|
import useTheme from "../../../hooks/useTheme";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { getGuildThemePresetAppearance, getSingleColorGuildThemeGradientColors, GUILD_THEME_DEFAULT_BASE_MIX } from "../../guild_themes/GuildThemePresets";
|
|
import { colorToHex } from "./ClientThemesUtils";
|
|
import Module689 from "../../../_bundle/Module689";
|
|
import SentryUtils_native from "../../../utils/SentryUtils.native";
|
|
import { useStateFromStoresObject } from "../../../_bundle/defaultAreStatesEqual";
|
|
import useRoutedActiveGuildTheme from "../../guild_themes/native/useRoutedActiveGuildTheme";
|
|
import { useCustomThemeDisplaySettings } from "./useCustomThemeDisplaySettings";
|
|
import { ClientThemeType } from "../ClientThemesTypes";
|
|
let useStyles, angleCenter, c2877_10, GradientBase, Gradient, GuildThemePresetGradient, c2877_15, CustomThemesGradient, ActiveGuildThemeGradient, $mk74871 = function() {
|
|
return (a0, a1) => {
|
|
if (typeof a1 === "string" && c2877_15.test(a1)) {
|
|
a0.push(a1);
|
|
return a0;
|
|
}
|
|
try {
|
|
a0.push(Module689(a1).hex("rgb"));
|
|
} catch ($e) {}
|
|
return a0;
|
|
};
|
|
};
|
|
const getMixedGradientColor = function getMixedGradientColor({ color, mixAmount: mixAmount3, mixColorOverride: mixColorOverride4, theme: theme4 }) {
|
|
const r21 = {
|
|
mixAmount: mixAmount3,
|
|
mixColorOverride: mixColorOverride4,
|
|
theme: theme4
|
|
};
|
|
let mixAmount4 = r21.mixAmount;
|
|
if (mixAmount4 === void 0) {
|
|
mixAmount4 = {};
|
|
}
|
|
let mixColorOverride5 = r21.mixColorOverride;
|
|
const { theme: theme5, darkFallbackOpacity = 0.7 } = r21;
|
|
let lightFallbackOpacity = r21.lightFallbackOpacity;
|
|
if (lightFallbackOpacity === void 0) {
|
|
lightFallbackOpacity = 0.8;
|
|
}
|
|
if (mixColorOverride5 == null) {
|
|
const isThemeDark = _shared.isThemeDark(theme5);
|
|
if (isThemeDark) {
|
|
lightFallbackOpacity = darkFallbackOpacity;
|
|
}
|
|
let r27 = isThemeDark ? mixAmount4.dark : mixAmount4.light;
|
|
if (r27 == null) {
|
|
r27 = lightFallbackOpacity;
|
|
}
|
|
const r0 = isThemeDark ? 0 : 255;
|
|
mixColorOverride5 = new Color(r0, r0, r0, r27);
|
|
}
|
|
const r33 = {
|
|
mixAmount: mixAmount3,
|
|
theme: theme4
|
|
};
|
|
const { mixAmount: mixAmount5 = {}, theme: theme6 } = r33;
|
|
let darkFallbackAmount = r33.darkFallbackAmount;
|
|
if (darkFallbackAmount === void 0) {
|
|
darkFallbackAmount = 0.3;
|
|
}
|
|
let lightFallbackAmount = r33.lightFallbackAmount;
|
|
if (lightFallbackAmount === void 0) {
|
|
lightFallbackAmount = 0.2;
|
|
}
|
|
if (_shared.isThemeDark(theme6)) {
|
|
if (mixAmount5.dark != null) {
|
|
darkFallbackAmount = 1 - mixAmount5.dark;
|
|
}
|
|
lightFallbackAmount = darkFallbackAmount;
|
|
} else if (mixAmount5.light != null) {
|
|
lightFallbackAmount = 1 - mixAmount5.light;
|
|
}
|
|
const r53 = hexToRgb(color);
|
|
return mixColors(mixColorOverride5, new Color(r53.r, r53.g, r53.b, lightFallbackAmount)).toHexString();
|
|
};
|
|
GradientBase = function GradientBase(props) {
|
|
const { colors, locations, angle, angleCenter: angleCenter2 = angleCenter } = props;
|
|
let absolute = props.absolute;
|
|
let wide = props.wide;
|
|
let tall = props.tall;
|
|
const componentStyles = props.componentStyles;
|
|
const styles = useStyles();
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const { width, height } = windowDimensions_native;
|
|
if (wide) {
|
|
wide = {
|
|
width
|
|
};
|
|
}
|
|
const style = [wide, , , , ,];
|
|
if (tall) {
|
|
tall = {
|
|
height
|
|
};
|
|
}
|
|
style[1] = tall;
|
|
style[2] = styles.linearGradient;
|
|
if (absolute) {
|
|
absolute = styles.absolute;
|
|
}
|
|
style[3] = absolute;
|
|
style[4] = componentStyles;
|
|
return <Module4611 colors={colors} locations={locations} angle={angle} angleCenter={angleCenter2} useAngle style={style} />;
|
|
};
|
|
Gradient = function Gradient(props) {
|
|
const { gradient, absolute, wide, tall } = props;
|
|
let angleOverride = props.angleOverride;
|
|
const { componentStyles, mix, mixAmount: mixAmount3 = {} } = props;
|
|
const mixAmount = mixAmount3;
|
|
const mixColorOverride = props.mixColorOverride;
|
|
const theme = useTheme();
|
|
const props2 = {
|
|
colors: gradient.colors.map((a0) => mix ? getMixedGradientColor({
|
|
color: Module712.unsafe_rawColors[a0.token],
|
|
mixAmount,
|
|
mixColorOverride,
|
|
theme
|
|
}) : Module712.unsafe_rawColors[a0.token]),
|
|
locations: gradient.colors.map((color) => color.stop / 100),
|
|
angle: null,
|
|
angleCenter: null,
|
|
absolute: null,
|
|
wide: null,
|
|
tall: null,
|
|
componentStyles: null
|
|
};
|
|
if (angleOverride == null) {
|
|
angleOverride = gradient.angle;
|
|
}
|
|
props2.angle = angleOverride;
|
|
let angleCenter2 = gradient.angleCenter;
|
|
if (angleCenter2 == null) {
|
|
angleCenter2 = angleCenter;
|
|
}
|
|
props2.angleCenter = angleCenter2;
|
|
props2.absolute = absolute;
|
|
props2.wide = wide;
|
|
props2.tall = tall;
|
|
props2.componentStyles = componentStyles;
|
|
return <GradientBase {...props2} />;
|
|
};
|
|
GuildThemePresetGradient = function GuildThemePresetGradient(props) {
|
|
const { preset, absolute, wide, tall } = props;
|
|
let angleOverride = props.angleOverride;
|
|
const { componentStyles, mix: mix2, mixAmount: mixAmount3 = {} } = props;
|
|
const mixAmount2 = mixAmount3;
|
|
const mixColorOverride2 = props.mixColorOverride;
|
|
const theme2 = useTheme();
|
|
const guildThemePresetAppearance = getGuildThemePresetAppearance(preset, theme2);
|
|
const props2 = {
|
|
colors: guildThemePresetAppearance.colors.map((a0) => mix2 ? getMixedGradientColor({
|
|
color: a0.hex,
|
|
mixAmount: mixAmount2,
|
|
mixColorOverride: mixColorOverride2,
|
|
theme: theme2
|
|
}) : a0.hex),
|
|
locations: guildThemePresetAppearance.colors.map((color) => color.stop / 100),
|
|
angle: null,
|
|
angleCenter: null,
|
|
absolute: null,
|
|
wide: null,
|
|
tall: null,
|
|
componentStyles: null
|
|
};
|
|
if (angleOverride == null) {
|
|
angleOverride = guildThemePresetAppearance.angle;
|
|
}
|
|
props2.angle = angleOverride;
|
|
props2.angleCenter = angleCenter;
|
|
props2.absolute = absolute;
|
|
props2.wide = wide;
|
|
props2.tall = tall;
|
|
props2.componentStyles = componentStyles;
|
|
return <GradientBase {...props2} />;
|
|
};
|
|
CustomThemesGradient = function CustomThemesGradient(props) {
|
|
const { colors, baseMix: baseMix2, gradientAngle } = props;
|
|
let gradientColorStops = props.gradientColorStops;
|
|
let absolute = props.absolute;
|
|
let wide = props.wide;
|
|
let tall = props.tall;
|
|
const mix3 = props.mix;
|
|
let mixAmount3 = props.mixAmount;
|
|
if (mixAmount3 === void 0) {
|
|
mixAmount3 = {};
|
|
}
|
|
let c14384_0, c14384_1;
|
|
const { mixColorOverride: mixColorOverride4, componentStyles, theme: theme4 } = props;
|
|
c14384_0 = void 0;
|
|
c14384_1 = void 0;
|
|
const styles = useStyles();
|
|
const windowDimensions_native = useWindowDimensions_native();
|
|
const { width, height } = windowDimensions_native;
|
|
const baseMix = baseMix2;
|
|
if (mixAmount3 === void 0) {
|
|
mixAmount3 = {};
|
|
}
|
|
let c14385_1 = mixAmount3;
|
|
const mixColorOverride3 = mixColorOverride4;
|
|
const theme3 = theme4;
|
|
const r32 = mix3 ? colors.map((color) => {
|
|
const r1 = baseMix / 100;
|
|
let r10 = c14385_1;
|
|
let r12 = mixColorOverride3;
|
|
let r3 = c2877_10;
|
|
const r4 = r10 !== void 0;
|
|
const r13 = r4 ? r10 : {};
|
|
if (mixColorOverride3 == null) {
|
|
const r2 = 1 - r1;
|
|
let r25 = c2877_10 + 0.2 * r2;
|
|
const isThemeDark = _shared.isThemeDark(theme3);
|
|
if (isThemeDark) {
|
|
r25 = c2877_10 + 0.25 * r2;
|
|
}
|
|
let r33 = isThemeDark ? r13.dark : r13.light;
|
|
if (r33 == null) {
|
|
r33 = r25;
|
|
}
|
|
const r34 = isThemeDark ? 0 : 255;
|
|
r12 = new Color(r34, r34, r34, r33);
|
|
}
|
|
if (!r4) {
|
|
r10 = {};
|
|
}
|
|
let r40 = c2877_10 === void 0 ? 0.3 : c2877_10;
|
|
if (c2877_10 === void 0) {
|
|
r3 = 0.2;
|
|
}
|
|
if (_shared.isThemeDark(theme3)) {
|
|
if (r10.dark != null) {
|
|
r40 = 1 - r10.dark;
|
|
}
|
|
r3 = r40;
|
|
} else if (r10.light != null) {
|
|
r3 = 1 - r10.light;
|
|
}
|
|
const r57 = hexToRgb(color);
|
|
return colorToHex(mixColors(r12, new Color(r57.r, r57.g, r57.b, r3)));
|
|
}) : colors;
|
|
const r36 = r32.length === 1 ? [r32[0], r32[0]] : r32;
|
|
c14384_0 = r36;
|
|
const r45 = (gradientAngle - 90) * Math.PI / 180;
|
|
const r48 = Math.cos(r45);
|
|
const r51 = Math.sin(r45);
|
|
const start = {
|
|
x: 0.6 - 0.7142857142857143 * r48,
|
|
y: 0.5 - 0.7142857142857143 * r51
|
|
};
|
|
const end = {
|
|
x: 0.6 + 0.7142857142857143 * r48,
|
|
y: 0.5 + 0.7142857142857143 * r51
|
|
};
|
|
const colors2 = r36.reduce($mk74871(), []);
|
|
c14384_1 = colors2;
|
|
let c14386_0 = colors2;
|
|
if (gradientColorStops === void 0) {
|
|
gradientColorStops = [];
|
|
}
|
|
const locations = gradientColorStops.length === colors2.length ? gradientColorStops.map((gradientColorStop) => gradientColorStop / 100) : colors2.length === 1 ? [0, 1] : colors2.map((item, index) => index / (c14386_0.length - 1));
|
|
useEffect(() => {
|
|
if (c14384_1.length < 2) {
|
|
SentryUtils_native.captureException(new Error("Invalid custom theme gradient colors"), {
|
|
extra: {
|
|
gradientColors: JSON.stringify(c14384_0)
|
|
}
|
|
});
|
|
}
|
|
}, [colors2, r36]);
|
|
const r6 = colors2.length < 2;
|
|
let r84 = null;
|
|
if (!r6) {
|
|
if (wide) {
|
|
wide = {
|
|
width
|
|
};
|
|
}
|
|
const style = [wide, , , , ,];
|
|
if (tall) {
|
|
tall = {
|
|
height
|
|
};
|
|
}
|
|
style[1] = tall;
|
|
style[2] = styles.linearGradient;
|
|
if (absolute) {
|
|
absolute = styles.absolute;
|
|
}
|
|
style[3] = absolute;
|
|
style[4] = componentStyles;
|
|
r84 = <Module4611 colors={colors2} locations={locations} start={start} end={end} style={style} />;
|
|
}
|
|
return r84;
|
|
};
|
|
ActiveGuildThemeGradient = function ActiveGuildThemeGradient(props) {
|
|
const { activeGuildTheme, theme: theme4, ...props2 } = props;
|
|
if (activeGuildTheme.type === "custom") {
|
|
const customUserThemeSettings = activeGuildTheme.customUserThemeSettings;
|
|
const colors = [...getSingleColorGuildThemeGradientColors(customUserThemeSettings.colors[0], theme4)];
|
|
let gradientAngle = customUserThemeSettings.gradientAngle;
|
|
if (gradientAngle == null) {
|
|
gradientAngle = 0;
|
|
}
|
|
let baseMix2 = customUserThemeSettings.baseMix;
|
|
if (baseMix2 == null) {
|
|
baseMix2 = GUILD_THEME_DEFAULT_BASE_MIX;
|
|
}
|
|
return <CustomThemesGradient {...props2} colors={colors} gradientColorStops={[]} gradientAngle={gradientAngle} baseMix={baseMix2} theme={theme4} />;
|
|
}
|
|
return <GuildThemePresetGradient {...props2} preset={activeGuildTheme.preset} />;
|
|
};
|
|
useStyles = createStyles({
|
|
softenGradient: {
|
|
flex: 1
|
|
},
|
|
linearGradient: {
|
|
flex: 1
|
|
},
|
|
absolute: {
|
|
position: "absolute",
|
|
top: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0
|
|
}
|
|
});
|
|
angleCenter = {
|
|
x: 0.5,
|
|
y: 0.5
|
|
};
|
|
c2877_10 = 0.5;
|
|
c2877_15 = /^#(?:[0-9a-fA-F]{3}){1,2}$/;
|
|
export default function ThemedGradient(props) {
|
|
let r66;
|
|
const { overlayOpacity = 0.7, gradientOverride, ...props2 } = props;
|
|
const styles = useStyles();
|
|
const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
|
|
const withOverlay = props2.withOverlay;
|
|
const theme4 = useTheme();
|
|
const preset = useStateFromStoresObject([ClientThemesBackgroundStore], () => ({
|
|
preset: ClientThemesBackgroundStore.gradientPreset
|
|
})).preset;
|
|
const routedActiveGuildTheme = useRoutedActiveGuildTheme();
|
|
const customThemeDisplaySettings = useCustomThemeDisplaySettings();
|
|
const r2 = customThemeDisplaySettings !== void 0;
|
|
if (gradientOverride != null) {
|
|
if (r2 && gradientOverride.type === ClientThemeType.CUSTOM_BACKGROUND_GRADIENT) {
|
|
const r161 = <CustomThemesGradient {...props2} {...gradientOverride.customThemeSettings} theme={gradientOverride.theme} />;
|
|
return withOverlay ? <View style={styles.absolute}>
|
|
{r161}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r161;
|
|
}
|
|
if (gradientOverride.type === ClientThemeType.BACKGROUND_GRADIENT_PRESET) {
|
|
const r135 = <Gradient {...props2} gradient={gradientOverride} />;
|
|
return withOverlay ? <View style={styles.absolute}>
|
|
{r135}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r135;
|
|
}
|
|
}
|
|
L24: {
|
|
if (routedActiveGuildTheme != null) {
|
|
const r113 = <ActiveGuildThemeGradient {...props2} activeGuildTheme={routedActiveGuildTheme} theme={theme4} />;
|
|
r66 = withOverlay ? <View style={styles.absolute}>
|
|
{r113}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r113;
|
|
} else {
|
|
if (r2 && r2) {
|
|
const r91 = <CustomThemesGradient {...props2} {...customThemeDisplaySettings.customTheme} theme={customThemeDisplaySettings.baseTheme} />;
|
|
r66 = withOverlay ? <View style={styles.absolute}>
|
|
{r91}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r91;
|
|
break L24;
|
|
}
|
|
const r65 = preset != null;
|
|
r66 = null;
|
|
if (r65) {
|
|
const r21 = <Gradient {...props2} gradient={preset} />;
|
|
r66 = withOverlay ? <View style={styles.absolute}>
|
|
{r21}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r21;
|
|
}
|
|
}
|
|
}
|
|
return r66;
|
|
};
|
|
export { Gradient };
|
|
export function validateColors(a0) {
|
|
return a0.reduce($mk74871(), []);
|
|
}
|
|
export function CustomThemedGradient(props) {
|
|
const { overlayOpacity = 0.7, customTheme, ...props2 } = props;
|
|
const styles = useStyles();
|
|
const r14 = _shared.isThemeDark(useTheme()) ? Module712.unsafe_rawColors.BLACK : Module712.unsafe_rawColors.WHITE;
|
|
const r38 = <CustomThemesGradient {...props2} {...customTheme.customThemeSettings} theme={customTheme.theme} />;
|
|
return props2.withOverlay ? <View style={styles.absolute}>
|
|
{r38}
|
|
<View style={[styles.softenGradient, {
|
|
backgroundColor: hexWithOpacity(r14, overlayOpacity)
|
|
}]} />
|
|
</View> : r38;
|
|
}
|