65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
// Metro module 15925 (f15926).
|
|
import { useState } from "react";
|
|
import { View } from "react-native";
|
|
import AccessibilityStore from "../../a11y/AccessibilityStore";
|
|
import { ContentDismissActionType } from "../../dismissible_content/DismissibleContentConstants";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useIsScreenLandscape } from "../../screen/useIsScreenLandscape.native";
|
|
import { useStateFromStores } from "../../../_bundle/Module589";
|
|
import { BottomSheet } from "../../../design/components/Sheet/native/BottomSheet.native";
|
|
import Video from "../../../components_native/common/Video";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../intl/index.native";
|
|
import { Button } from "../../../design/components/Button/native/Button.native";
|
|
const src = {
|
|
videoURI: "https://cdn.discordapp.com/assets/activities/platform/activities_pipfab_tutorial_redesign.mp4"
|
|
};
|
|
const useStyles = createStyles({
|
|
videoContainer: {
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
bottomSheetWrapper: {
|
|
paddingHorizontal: 24
|
|
},
|
|
contentContainer: {
|
|
flex: 1,
|
|
alignItems: "center",
|
|
paddingTop: 24,
|
|
paddingBottom: 16
|
|
},
|
|
title: {
|
|
marginTop: 16,
|
|
textAlign: "center"
|
|
},
|
|
body: {
|
|
marginTop: 8,
|
|
marginBottom: 24,
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
export default function VoiceControlsToggleActionSheet(props) {
|
|
const markAsDismissed = props.markAsDismissed;
|
|
const styles = useStyles();
|
|
const [width, setState] = useState(0);
|
|
const isScreenLandscape = useIsScreenLandscape();
|
|
return <BottomSheet startExpanded onDismiss={() => markAsDismissed(ContentDismissActionType.UNKNOWN)}>
|
|
<View style={styles.bottomSheetWrapper}>
|
|
<View style={styles.contentContainer} onLayout={(event) => {
|
|
const width = event.nativeEvent.layout.width;
|
|
setState(isScreenLandscape ? width / 2 : width);
|
|
}}>
|
|
<Video style={styles.videoContainer} src={src} poster="https://cdn.discordapp.com/assets/activities/platform/activities_pipfab_tutorial_redesign.png" width={width} height={width / (isScreenLandscape ? 2.0875 : 1.5)} muted paused={useStateFromStores([AccessibilityStore], () => AccessibilityStore.useReducedMotion)} />
|
|
<Text style={styles.title} accessibilityRole="header" variant="heading-xl/extrabold" color="mobile-text-heading-primary">
|
|
{intl.string(t.pT6hue)}
|
|
</Text>
|
|
<Text style={styles.body} variant="text-sm/normal">
|
|
{intl.string(t.tNm8AZ)}
|
|
</Text>
|
|
<Button onPress={() => markAsDismissed(ContentDismissActionType.UNKNOWN)} text={intl.string(t["NX+WJN"])} />
|
|
</View>
|
|
</View>
|
|
</BottomSheet>;
|
|
};
|