44 lines
1.9 KiB
TypeScript
44 lines
1.9 KiB
TypeScript
// Metro module 14169 (f14170).
|
|
import { useMemo } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../../_bundle/Module712";
|
|
import Module689 from "../../../../../_bundle/Module689";
|
|
import { useVideoQuestCaptions } from "../hooks/useVideoQuestCaptions";
|
|
import { findActiveCaption } from "./VideoQuestCaptionsUtils";
|
|
import VisualEffectView from "../../../../visual_effect_view/native/VisualEffectView";
|
|
import { Text } from "../../../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
position: "absolute",
|
|
bottom: Module712.space.PX_32,
|
|
left: Module712.space.PX_16,
|
|
right: Module712.space.PX_16,
|
|
alignItems: "center",
|
|
justifyContent: "flex-end"
|
|
},
|
|
captionBox: {
|
|
backgroundColor: Module689(Module712.unsafe_rawColors.BLACK).alpha(0.35).hex(),
|
|
padding: Module712.space.PX_8,
|
|
borderRadius: Module712.radii.sm,
|
|
overflow: "hidden"
|
|
},
|
|
captionText: {
|
|
color: Module712.colors.WHITE,
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
export function VideoQuestCaptions(props) {
|
|
const { quest, currentTime, style, visible = true } = props;
|
|
let c21001_1 = visible;
|
|
const styles = useStyles();
|
|
const videoQuestCaptions = useVideoQuestCaptions(quest);
|
|
const { captions, status } = videoQuestCaptions;
|
|
const memo = useMemo(() => captions != null ? c21001_1 ? findActiveCaption(captions, currentTime) : null : null, [captions, currentTime, visible]);
|
|
return status === "success" ? memo == null ? null : <View style={[styles.container, style]} importantForAccessibility="no-hide-descendants" accessibilityRole="none" accessible={false}>
|
|
<VisualEffectView style={styles.captionBox} blurTheme="dark" blurStyle="default" blurAmount={0.2}>
|
|
<Text variant="heading-sm/medium" style={styles.captionText}>{memo.text}</Text>
|
|
</VisualEffectView>
|
|
</View> : null;
|
|
}
|