107 lines
5.4 KiB
TypeScript
107 lines
5.4 KiB
TypeScript
// Metro module 15889 (f15890).
|
|
import { memo, useState, useRef, useCallback } from "react";
|
|
import { View } from "react-native";
|
|
import { setSearchQuery, useExpressionPickerStore } from "../../expression_picker/ExpressionPickerStore";
|
|
import RTCConnectionStore from "../../../stores/RTCConnectionStore";
|
|
import UserStore from "../../../stores/UserStore";
|
|
import { SOUND_ROW_HORIZONTAL_PADDING } from "./SoundboardStyleConstants";
|
|
import { EXPRESSION_FOOTER_HEIGHT } from "../../../Constants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useSharedValue } from "../../reanimated/ReanimatedRexport";
|
|
import { useStateFromStores } from "../../../_bundle/defaultAreStatesEqual";
|
|
import useSoundGrid, { useSearchCategories } from "../useSoundGrid";
|
|
import { searchSounds } from "../searchSounds";
|
|
import useSafeAreaInsetsKeyboardAware_native from "../../safe_area/useSafeAreaInsetsKeyboardAware.native";
|
|
import useAnalyticsLocations, { AnalyticsLocationProvider } from "../../app_analytics/useAnalyticsLocations";
|
|
import AnalyticsLocation from "../../app_analytics/AnalyticsLocation";
|
|
import useTrackImpression from "../../app_analytics/useTrackImpression";
|
|
import { ImpressionTypes, ImpressionNames } from "../../../_bundle/Module503";
|
|
import { isIOS, isAndroid } from "../../../utils/PlatformUtils";
|
|
import PortalKeyboardFooterIOS_ios from "../../keyboard/native/PortalKeyboardFooterIOS.ios";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import { PortalHost } from "../../../_bundle/Module4060";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { SearchField } from "../../../design/components/TextField/native/SearchField.native";
|
|
import { SoundboardSoundPickerList } from "./SoundboardSoundPickerList";
|
|
import PremiumSoundboardFeatureUpsell from "../../premium/roadblocks/native/views/PremiumSoundboardFeatureUpsell";
|
|
import SoundboardSoundPickerCategories from "./SoundboardSoundPickerCategories";
|
|
const useStyles = createStyles({
|
|
title: {
|
|
marginBottom: 8
|
|
},
|
|
container: {
|
|
flex: 1,
|
|
alignItems: "center"
|
|
},
|
|
header: {
|
|
paddingHorizontal: SOUND_ROW_HORIZONTAL_PADDING,
|
|
padding: Module712.space.PX_8,
|
|
width: "100%"
|
|
},
|
|
body: {
|
|
flex: 1,
|
|
width: "100%"
|
|
}
|
|
});
|
|
const r53 = memo(function SoundboardSoundPicker(props) {
|
|
let availableSounds, setState;
|
|
const { channel, analyticsSource } = props;
|
|
availableSounds = void 0;
|
|
setState = void 0;
|
|
const styles = useStyles();
|
|
const [categoryIndex, setCategoryIndex] = useState(0);
|
|
const ref = useRef(null);
|
|
const sharedValue2 = useSharedValue(0);
|
|
const stateFromStores = useStateFromStores([UserStore], () => UserStore.getCurrentUser());
|
|
const stateFromStores2 = useStateFromStores([RTCConnectionStore], () => RTCConnectionStore.getMediaSessionId());
|
|
const soundGrid = useSoundGrid(channel, {
|
|
filterOutEmptyCurrentGuild: true
|
|
});
|
|
const categories = soundGrid.categories;
|
|
availableSounds = soundGrid.availableSounds;
|
|
const expressionPickerStore = useExpressionPickerStore((a0) => a0.searchQuery);
|
|
let state;
|
|
[state, setState] = useState(searchSounds(expressionPickerStore, availableSounds, stateFromStores, channel));
|
|
const searchCategories = useSearchCategories(categories, state, expressionPickerStore);
|
|
const insets = useSafeAreaInsetsKeyboardAware_native({
|
|
isKeyboardAwareOnAndroid: false
|
|
}).insets;
|
|
const analyticsLocations = useAnalyticsLocations(AnalyticsLocation.SOUNDBOARD_ACTION_SHEET).analyticsLocations;
|
|
const callback = useCallback((a0) => {
|
|
setSearchQuery(a0);
|
|
setState(searchSounds(a0, availableSounds, stateFromStores, channel));
|
|
}, [channel, stateFromStores, availableSounds]);
|
|
useTrackImpression({
|
|
type: ImpressionTypes.HALFSHEET,
|
|
name: ImpressionNames.SOUNDBOARD_POPOUT,
|
|
properties: {
|
|
source: analyticsSource,
|
|
guild_id: channel.guild_id,
|
|
media_session_id: stateFromStores2
|
|
}
|
|
});
|
|
const sharedValue3 = useSharedValue(-1);
|
|
const sharedValue = useSharedValue(false);
|
|
return <AnalyticsLocationProvider value={analyticsLocations}>
|
|
{isIOS() && <PortalKeyboardFooterIOS_ios animatedSheetIndex={sharedValue3} portalHostName="soundboard-footer" followSystemKeyboard />}
|
|
<BottomSheet animatedIndex={sharedValue3} scrollable startExpanded footer={isAndroid() ? <PortalHost name="soundboard-footer" /> : void 0}>
|
|
<View style={styles.container}>
|
|
<Text accessibilityRole="header" variant="heading-lg/bold" style={styles.title}>
|
|
{intl.string(t.ABjMWI)}
|
|
</Text>
|
|
<View style={styles.header}>
|
|
<SearchField size="md" placeholder={intl.string(t.sKt3xS)} onChange={callback} />
|
|
</View>
|
|
<View style={styles.body}>
|
|
<SoundboardSoundPickerList listRef={ref} channel={channel} insetBottom={EXPRESSION_FOOTER_HEIGHT + insets.bottom + Module712.space.PX_16} scrollPosition={sharedValue2} setCategoryIndex={setCategoryIndex} categories={searchCategories} shouldShowPremiumUpsell={sharedValue} />
|
|
</View>
|
|
<PremiumSoundboardFeatureUpsell shouldShow={sharedValue} />
|
|
</View>
|
|
<SoundboardSoundPickerCategories guildId={channel.guild_id} listRef={ref} categories={categories} categoryIndex={categoryIndex} />
|
|
</BottomSheet>
|
|
</AnalyticsLocationProvider>;
|
|
});
|
|
export default r53;
|