322 lines
12 KiB
TypeScript
322 lines
12 KiB
TypeScript
// Metro module 11740 (f11741).
|
|
import * as Module19 from "react";
|
|
import { useEffect, useState, useCallback, useMemo } from "react";
|
|
import { View, ActivityIndicator } from "react-native";
|
|
import AccessibilityStore from "../../../a11y/AccessibilityStore";
|
|
import { useVoiceMessagesUIStore } from "../VoiceMessagesUIStore";
|
|
import { VOICE_RECORDING_MAX_DURATION_MILLIS, VOICE_RECORDING_MAX_DURATION_OFFSET, VOICE_RECORDING_REALLY_WARN_DURATION_MILLIS, VOICE_RECORDING_WARN_DURATION_MILLIS, WAVEFORM_WAVE_MAX_VALUE } from "../../VoiceMessageConstants";
|
|
import { ThemeTypes } from "../../../../Constants";
|
|
import * as _ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
import ReanimatedRexport, { useSharedValue, useAnimatedStyle, useAnimatedReaction } from "../../../reanimated/ReanimatedRexport";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import * as _PlatformUtils from "../../../../utils/PlatformUtils";
|
|
import { withSpring } from "../../../../design/animation/reanimated/spring/spring";
|
|
import * as _timing from "../../../../design/animation/reanimated/timing/timing";
|
|
import { useMobileVisualRefreshConfig } from "../../../themes/experiments/MobileVisualRefreshExperiment";
|
|
import { useToken } from "../../../../design/tokens/native/useToken";
|
|
import { getTimeFormat } from "../../../../utils/native/TimeUtils";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { ThemeContextProvider } from "../../../../_bundle/Module3901";
|
|
function $mk116289() {
|
|
return (a0) => !a0;
|
|
}
|
|
let AnimatedComponent, useStyles, __initData, Waveform, c8040_21, __initData2, Duration, __initData3, __initData4, __initData5, __initData6;
|
|
const WaveformBar = function WaveformBar(props) {
|
|
const value = props.value;
|
|
const styles = useStyles();
|
|
const sharedValue = useSharedValue(0);
|
|
const sharedValue2 = useSharedValue(0);
|
|
const sharedValue3 = useSharedValue(0);
|
|
const r26 = function() {
|
|
return {
|
|
height: sharedValue.get(),
|
|
width: sharedValue2.get(),
|
|
marginRight: sharedValue3.get()
|
|
};
|
|
};
|
|
r26.__closure = {
|
|
animatedHeight: sharedValue,
|
|
animatedWidth: sharedValue2,
|
|
animatedMargin: sharedValue3
|
|
};
|
|
r26.__workletHash = 8768145898720;
|
|
r26.__initData = __initData;
|
|
const animatedStyle = useAnimatedStyle(r26);
|
|
useEffect(() => {
|
|
sharedValue.set(withSpring(Math.max(2, 20 * Math.min(1, value / WAVEFORM_WAVE_MAX_VALUE * 1.25))));
|
|
}, [sharedValue, value]);
|
|
useEffect(() => {
|
|
sharedValue2.set(_timing.withTiming(2, {
|
|
duration: 300,
|
|
easing: _ReanimatedRexport.Easing.linear
|
|
}));
|
|
sharedValue3.set(_timing.withTiming(4, {
|
|
duration: 300,
|
|
easing: _ReanimatedRexport.Easing.linear
|
|
}));
|
|
}, [sharedValue2, sharedValue3]);
|
|
return <ReanimatedRexport.View style={[styles.waveformBar, animatedStyle]} />;
|
|
};
|
|
Waveform = function Waveform() {
|
|
const styles = useStyles();
|
|
useVoiceMessagesUIStore((a0) => a0.waveformVersion);
|
|
const voiceMessagesUIStore3 = useVoiceMessagesUIStore((a0) => a0.waveform);
|
|
const [state, setState] = useState(0);
|
|
const r21 = voiceMessagesUIStore3.slice(-state);
|
|
return <View style={styles.waveformContainer} onLayout={useCallback((a0) => {
|
|
setState(Math.round(a0.nativeEvent.layout.width / 6) + 2);
|
|
}, [])}>
|
|
{r21.map((item) => {
|
|
const [value2, key] = item;
|
|
return <WaveformBar key={key} value={value2} />;
|
|
})}
|
|
</View>;
|
|
};
|
|
Duration = function Duration(props) {
|
|
let state, setState2, state2, setState3, voiceMessagesUIStore2, setState4;
|
|
const animationValue = props.animationValue;
|
|
state = void 0;
|
|
setState2 = void 0;
|
|
state2 = void 0;
|
|
setState3 = void 0;
|
|
voiceMessagesUIStore2 = void 0;
|
|
setState4 = void 0;
|
|
const styles = useStyles();
|
|
const chatInputFloating = useMobileVisualRefreshConfig({
|
|
location: "voice-message-chat"
|
|
}).chatInputFloating;
|
|
const voiceMessagesUIStore = useVoiceMessagesUIStore((a0) => a0.startTimeMillis);
|
|
[state, setState2] = useState(() => voiceMessagesUIStore != null ? Date.now() - voiceMessagesUIStore : 0);
|
|
[state2, setState3] = useState(void 0);
|
|
voiceMessagesUIStore2 = useVoiceMessagesUIStore((a0) => a0.savedVoiceMessageUploadData != null);
|
|
const token = useToken(Module712.modules.mobile.VOICE_MESSAGE_DURATION_TEXT_STYLE);
|
|
useEffect(() => {
|
|
if (voiceMessagesUIStore2) {
|
|
setState2(VOICE_RECORDING_MAX_DURATION_MILLIS + VOICE_RECORDING_MAX_DURATION_OFFSET);
|
|
setState3(c8040_21.ENDED);
|
|
return void 0;
|
|
}
|
|
let c27140_0 = setInterval(() => {
|
|
if (voiceMessagesUIStore != null) {
|
|
const r7 = Date.now() - voiceMessagesUIStore;
|
|
setState2(r7);
|
|
if (r7 > VOICE_RECORDING_REALLY_WARN_DURATION_MILLIS) {
|
|
setState3(c8040_21.REALLY_WARN);
|
|
} else if (r7 > VOICE_RECORDING_WARN_DURATION_MILLIS) {
|
|
setState3(c8040_21.WARN);
|
|
}
|
|
}
|
|
}, 100);
|
|
return () => {
|
|
clearInterval(c27140_0);
|
|
};
|
|
}, [voiceMessagesUIStore, voiceMessagesUIStore2]);
|
|
const memo = useMemo(() => getTimeFormat(state / 1000, {
|
|
padMinutes: false
|
|
}), [state]);
|
|
let state3;
|
|
[state3, setState4] = useState(false);
|
|
useEffect(() => {
|
|
if (state2 != null) {
|
|
if (state2 !== c8040_21.ENDED) {
|
|
const r1 = AccessibilityStore.useReducedMotion ? 1000 : state2 === c8040_21.WARN ? 500 : 250;
|
|
let c27141_0;
|
|
let c27141_1 = r1;
|
|
const flash2 = function flash() {
|
|
setState4($mk116289());
|
|
c27141_0 = setTimeout(flash2, c27141_1);
|
|
};
|
|
setState4($mk116289());
|
|
c27141_0 = setTimeout(flash2, r1);
|
|
return () => {
|
|
clearTimeout(c27141_0);
|
|
};
|
|
}
|
|
setState4(true);
|
|
} else {
|
|
setState4(false);
|
|
}
|
|
}, [state2]);
|
|
const B = function B() {
|
|
return {
|
|
opacity: animationValue.get()
|
|
};
|
|
};
|
|
B.__closure = {
|
|
animationValue
|
|
};
|
|
B.__workletHash = 4012974382717;
|
|
B.__initData = __initData2;
|
|
const animatedStyle = useAnimatedStyle(B);
|
|
const style = [styles.dot, ,];
|
|
const r83 = voiceMessagesUIStore != null && !voiceMessagesUIStore2;
|
|
style[1] = r83 ? !r83 : styles.dotDismissed;
|
|
const r96 = <ReanimatedRexport.View style={[styles.durationContainer, animatedStyle]}>
|
|
<View style={style} />
|
|
<Text style={styles.duration} variant={token} color={state3 ? "text-feedback-critical" : chatInputFloating ? "text-default" : "text-overlay-light"} tabularNumbers>{memo}</Text>
|
|
</ReanimatedRexport.View>;
|
|
return chatInputFloating ? r96 : <ThemeContextProvider theme={ThemeTypes.DARK}>{r96}</ThemeContextProvider>;
|
|
};
|
|
AnimatedComponent = ReanimatedRexport.createAnimatedComponent(ActivityIndicator);
|
|
const isAndroid = _PlatformUtils.isAndroid();
|
|
const mobile = Module712.modules.mobile;
|
|
useStyles = createStyles({
|
|
container: {
|
|
height: "100%",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingVertical: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_CONTAINER_PADDING_VERTICAL,
|
|
paddingHorizontal: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_PILL_PADDING_HORIZONTAL,
|
|
gap: Module712.modules.mobile.CHAT_INPUT_FLOATING_CONTENT_GAP,
|
|
borderRadius: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_PILL_BORDER_RADIUS,
|
|
backgroundColor: Module712.colors.MOBILE_CHATINPUT_BACKGROUND_DEFAULT,
|
|
borderWidth: Module712.modules.mobile.CHAT_INPUT_FLOATING_ACCESSORY_BORDER_WIDTH,
|
|
borderColor: Module712.colors.MOBILE_CHATINPUT_BORDER_DEFAULT
|
|
},
|
|
loading: {
|
|
position: "absolute",
|
|
left: 12
|
|
},
|
|
dot: {
|
|
height: 6,
|
|
width: 6,
|
|
backgroundColor: Module712.unsafe_rawColors.RED_400,
|
|
marginHorizontal: 4,
|
|
borderRadius: 6
|
|
},
|
|
dotDismissed: {
|
|
backgroundColor: "transparent"
|
|
},
|
|
waveformContainer: {
|
|
flex: 1,
|
|
height: "100%",
|
|
overflow: "hidden",
|
|
justifyContent: "flex-end",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
marginLeft: Module712.modules.mobile.VOICE_MESSAGE_RECORDING_WAVEFORM_MARGIN_LEFT
|
|
},
|
|
waveformBar: {
|
|
backgroundColor: Module712.colors.MOBILE_VOICE_MESSAGE_RECORDING_WAVEFORM_BAR_BACKGROUND,
|
|
borderRadius: 1
|
|
},
|
|
durationContainer: {
|
|
flexDirection: "row",
|
|
alignItems: "center"
|
|
},
|
|
duration: {
|
|
lineHeight: isAndroid ? mobile.VOICE_MESSAGE_DURATION_LINE_HEIGHT_ANDROID : mobile.VOICE_MESSAGE_DURATION_LINE_HEIGHT_IOS,
|
|
textAlignVertical: _PlatformUtils.isAndroid() ? "center" : void 0
|
|
}
|
|
});
|
|
__initData = {
|
|
code: "function VoiceMessageChatTsx1(){const{animatedHeight,animatedWidth,animatedMargin}=this.__closure;return{height:animatedHeight.get(),width:animatedWidth.get(),marginRight:animatedMargin.get()};}"
|
|
};
|
|
c8040_21 = {
|
|
WARN: 0,
|
|
0: "WARN",
|
|
REALLY_WARN: 1,
|
|
1: "REALLY_WARN",
|
|
ENDED: 2,
|
|
2: "ENDED"
|
|
};
|
|
__initData2 = {
|
|
code: "function VoiceMessageChatTsx2(){const{animationValue}=this.__closure;return{opacity:animationValue.get()};}"
|
|
};
|
|
__initData3 = {
|
|
code: "function VoiceMessageChatTsx3(){const{initialAnimation,isRecording}=this.__closure;return initialAnimation.get()===1&&isRecording;}"
|
|
};
|
|
__initData4 = {
|
|
code: "function VoiceMessageChatTsx4(result,previous){const{animationValue,withTiming,Easing,loadingOpacity}=this.__closure;if(result&&result!==previous){animationValue.set(withTiming(1,{easing:Easing.quad,duration:200}));loadingOpacity.set(0);}}"
|
|
};
|
|
__initData5 = {
|
|
code: "function VoiceMessageChatTsx5(){const{initialAnimation,backgroundColor}=this.__closure;return{width:80+20*initialAnimation.get()+\"%\",...(backgroundColor!=null?{backgroundColor:backgroundColor.get()}:{})};}"
|
|
};
|
|
__initData6 = {
|
|
code: "function VoiceMessageChatTsx6(){const{loadingOpacity}=this.__closure;return{opacity:loadingOpacity.get()};}"
|
|
};
|
|
const r135 = Module19.memo(function({ isRecording, initialAnimation, backgroundColor, leftAccessory, rightAccessory }) {
|
|
let sharedValue5;
|
|
sharedValue5 = void 0;
|
|
const styles = useStyles();
|
|
const token = useToken(Module712.colors.MOBILE_VOICE_MESSAGE_RECORDING_SPINNER_COLOR);
|
|
const sharedValue4 = useSharedValue(0);
|
|
useEffect(() => {
|
|
if (isRecording) {
|
|
return void 0;
|
|
}
|
|
let c27142_0 = setTimeout(() => {
|
|
sharedValue4.set(_timing.withTiming(1, {
|
|
easing: _ReanimatedRexport.Easing.quad,
|
|
duration: 200
|
|
}));
|
|
}, 1000);
|
|
return () => {
|
|
clearTimeout(c27142_0);
|
|
};
|
|
}, [sharedValue4, isRecording]);
|
|
sharedValue5 = useSharedValue(0);
|
|
const A = function A() {
|
|
return initialAnimation.get() === 1 && isRecording;
|
|
};
|
|
A.__closure = {
|
|
initialAnimation,
|
|
isRecording
|
|
};
|
|
A.__workletHash = 7599681139161;
|
|
A.__initData = __initData3;
|
|
const h = function h(a0, a1) {
|
|
if (a0 ? a0 !== a1 : a0) {
|
|
sharedValue5.set(_timing.withTiming(1, {
|
|
easing: _ReanimatedRexport.Easing.quad,
|
|
duration: 200
|
|
}));
|
|
sharedValue4.set(0);
|
|
}
|
|
};
|
|
h.__closure = {
|
|
animationValue: sharedValue5,
|
|
withTiming: _timing.withTiming,
|
|
Easing: _ReanimatedRexport.Easing,
|
|
loadingOpacity: sharedValue4
|
|
};
|
|
h.__workletHash = 7661977794788;
|
|
h.__initData = __initData4;
|
|
useAnimatedReaction(A, h);
|
|
const I = function I() {
|
|
return {
|
|
width: 80 + 20 * initialAnimation.get() + "%",
|
|
...backgroundColor != null ? {
|
|
backgroundColor: backgroundColor.get()
|
|
} : {}
|
|
};
|
|
};
|
|
I.__closure = {
|
|
initialAnimation,
|
|
backgroundColor
|
|
};
|
|
I.__workletHash = 3621425956686;
|
|
I.__initData = __initData5;
|
|
const animatedStyle = useAnimatedStyle(I);
|
|
const f = function f() {
|
|
return {
|
|
opacity: sharedValue4.get()
|
|
};
|
|
};
|
|
f.__closure = {
|
|
loadingOpacity: sharedValue4
|
|
};
|
|
f.__workletHash = 17421928475897;
|
|
f.__initData = __initData6;
|
|
const animatedStyle2 = useAnimatedStyle(f);
|
|
return <ReanimatedRexport.View style={[styles.container, animatedStyle]}>
|
|
{isRecording ? null : <AnimatedComponent style={[styles.loading, animatedStyle2]} color={token} size="small" />}
|
|
{leftAccessory}
|
|
<Duration animationValue={sharedValue5} />
|
|
<Waveform />
|
|
{rightAccessory}
|
|
</ReanimatedRexport.View>;
|
|
});
|
|
export default r135;
|