130 lines
5.2 KiB
TypeScript
130 lines
5.2 KiB
TypeScript
// Metro module 15902 (f15903).
|
|
import { useCallback } from "react";
|
|
import { Image as Image2, View, StyleSheet } from "react-native";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import SoundboardStore from "../SoundboardStore";
|
|
import { AnalyticsObjects } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { isIOS } from "../../../utils/PlatformUtils";
|
|
import { useStateFromStores, useStateFromStoresObject } from "../../../_bundle/Module589";
|
|
import useAnalyticsLocations from "../../app_analytics/useAnalyticsLocations";
|
|
import { removeFavoriteSound, addFavoriteSound, playSoundLocally } from "../SoundboardActionCreators";
|
|
import { trackSoundFavorited } from "../SoundboardUtils";
|
|
import { LocalSoundTrigger } from "../SoundboardTypes";
|
|
import { useButtonPressAnimationProps } from "../../../design/components/Button/native/ButtonHooks.native";
|
|
import { ActionSheet } from "../../../design/components/Sheet/native/ActionSheet.native";
|
|
import Emoji from "../../emojis/native/Emoji";
|
|
import getSoundboardEmojiUrl from "./utils/getSoundboardEmojiUrl";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
import { StarIcon } from "../../../design/components/Icon/native/redesign/generated/StarIcon";
|
|
import { StarOutlineIcon } from "../../../design/components/Icon/native/redesign/generated/StarOutlineIcon";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import Module7684 from "../../../_bundle/Module7684";
|
|
import ReanimatedRexport from "../../reanimated/ReanimatedRexport";
|
|
const _excluded = ["style"];
|
|
const useStyles = createStyles({
|
|
emoji: {
|
|
marginTop: Module712.space.PX_16,
|
|
width: 64,
|
|
height: 64,
|
|
alignSelf: "center"
|
|
},
|
|
emojiFastImage: {
|
|
width: 128,
|
|
height: 128
|
|
},
|
|
emojiText: {
|
|
fontSize: isIOS() ? 60 : void 0,
|
|
lineHeight: 74
|
|
},
|
|
text: {
|
|
marginTop: Module712.space.PX_16,
|
|
alignSelf: "center"
|
|
},
|
|
buttonContainer: {
|
|
gap: Module712.space.PX_8,
|
|
marginTop: Module712.space.PX_24
|
|
},
|
|
star: {
|
|
width: 16,
|
|
height: 16,
|
|
tintColor: Module712.colors.TEXT_DEFAULT
|
|
},
|
|
border: {
|
|
borderColor: "transparent",
|
|
borderWidth: 1,
|
|
borderRadius: Module712.radii.round,
|
|
pointerEvents: "none",
|
|
...StyleSheet.absoluteFillObject
|
|
},
|
|
borderPlaying: {
|
|
borderColor: Module712.colors.TEXT_FEEDBACK_POSITIVE
|
|
}
|
|
});
|
|
export default function SoundboardSoundPreviewActionSheet(props) {
|
|
let analyticsLocations, isPlayingSound, isFavorite;
|
|
const { channelId, sound } = props;
|
|
analyticsLocations = void 0;
|
|
isPlayingSound = void 0;
|
|
isFavorite = void 0;
|
|
const styles = useStyles();
|
|
const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser()?.id);
|
|
analyticsLocations = useAnalyticsLocations().analyticsLocations;
|
|
const stateFromStoresObject = useStateFromStoresObject([SoundboardStore], () => ({
|
|
isPlayingSound: stateFromStores != null && SoundboardStore.isUserPlayingSounds(stateFromStores),
|
|
isFavorite: SoundboardStore.isFavoriteSound(sound.soundId)
|
|
}));
|
|
let isPlayingSound2 = stateFromStoresObject.isPlayingSound;
|
|
isPlayingSound = isPlayingSound2;
|
|
isFavorite = stateFromStoresObject.isFavorite;
|
|
const callback = useCallback(() => {
|
|
if (isFavorite) {
|
|
removeFavoriteSound(sound.soundId);
|
|
} else {
|
|
trackSoundFavorited({
|
|
sound,
|
|
location: {
|
|
...analyticsLocations,
|
|
object: AnalyticsObjects.SOUNDBOARD_SOUND
|
|
}
|
|
});
|
|
addFavoriteSound(sound.soundId);
|
|
}
|
|
}, [isFavorite, sound, analyticsLocations]);
|
|
const callback2 = useCallback(() => {
|
|
if (!isPlayingSound) {
|
|
playSoundLocally(channelId, sound, LocalSoundTrigger.SOUNDBOARD);
|
|
}
|
|
}, [channelId, sound, isPlayingSound]);
|
|
const buttonPressAnimationProps = useButtonPressAnimationProps();
|
|
const { style, ...rest } = buttonPressAnimationProps;
|
|
const props2 = {
|
|
fastImageStyle: [styles.emoji, styles.emojiFastImage],
|
|
textEmojiStyle: [styles.emoji, styles.emojiText],
|
|
src: getSoundboardEmojiUrl(sound, 64),
|
|
name: null
|
|
};
|
|
let emojiName = sound.emojiName;
|
|
if (emojiName == null) {
|
|
emojiName = "";
|
|
}
|
|
props2.name = emojiName;
|
|
const r74 = [<Emoji {...props2} />, <Text style={styles.text} variant="heading-lg/extrabold">{sound.name}</Text>, ,];
|
|
const r105 = [<Button variant="primary" icon={isFavorite ? <StarIcon style={styles.star} /> : <StarOutlineIcon style={styles.star} />} text={isFavorite ? intl.string(t.aBUcp3) : intl.string(t.yZFibY)} onPress={callback} />, ,];
|
|
const r128 = [<Button {...rest} variant="secondary" icon={<Image2 style={styles.star} source={Module7684} />} text={intl.string(t.Kd4uxG)} onPress={callback2} />, ,];
|
|
const style2 = [styles.border, , ,];
|
|
if (isPlayingSound) {
|
|
isPlayingSound2 = styles.borderPlaying;
|
|
}
|
|
style2[1] = isPlayingSound2;
|
|
style2[2] = style;
|
|
r128[1] = <ReanimatedRexport.View style={style2} />;
|
|
r105[1] = <View>{r128}</View>;
|
|
r74[2] = <View style={styles.buttonContainer}>{r105}</View>;
|
|
return <ActionSheet startExpanded>
|
|
<View>{r74}</View>
|
|
</ActionSheet>;
|
|
};
|