91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
// Metro module 12317 (f12318).
|
|
import { memo, useState, useRef, useCallback, useEffect } from "react";
|
|
import { ActivityIndicator, View, StyleSheet } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../../_bundle/Module712";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
import { intl, t } from "../../../../intl/index.native";
|
|
import MediaModalSpoilerOverlay from "./MediaModalSpoilerOverlay";
|
|
const useStyles = createStyles({
|
|
loader: {
|
|
...StyleSheet.absoluteFillObject,
|
|
flex: 1,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "rgba(0, 0, 0, 0.7)"
|
|
},
|
|
loaderIndicator: {
|
|
marginTop: Module712.space.PX_12
|
|
},
|
|
loaderText: {
|
|
textAlign: "center"
|
|
}
|
|
});
|
|
let c8512_10 = {
|
|
None: 0,
|
|
0: "None",
|
|
Loading: 1,
|
|
1: "Loading",
|
|
Loaded: 2,
|
|
2: "Loaded",
|
|
Error: 3,
|
|
3: "Error"
|
|
};
|
|
const r55 = memo(function MediaModalLoader(props) {
|
|
let r106;
|
|
const { Component, style, onLoadStart, onLoad, onError, index = 0, source, ...rest } = props;
|
|
const styles = useStyles();
|
|
const [state, setState] = useState(c8512_10.None);
|
|
const [state2, setState2] = useState(0);
|
|
const ref = useRef(null);
|
|
const callback2 = useCallback(() => {
|
|
const current = setTimeout(() => {
|
|
setState((prevState) => prevState === c8512_10.None ? c8512_10.Loading : c8512_10.None);
|
|
}, 1000);
|
|
ref.current = current;
|
|
return current;
|
|
}, []);
|
|
const callback = useCallback(({ nativeEvent }) => {
|
|
setState2(100 * nativeEvent.loaded / nativeEvent.total);
|
|
}, []);
|
|
const callback3 = useCallback(() => setState(c8512_10.Loaded), []);
|
|
const callback4 = useCallback(() => setState(c8512_10.Error), []);
|
|
useEffect(() => {
|
|
if (c8512_10.Loading === state) {
|
|
if (onLoadStart != null) {
|
|
onLoadStart();
|
|
}
|
|
} else if (c8512_10.Error === state) {
|
|
if (onError != null) {
|
|
onError();
|
|
}
|
|
} else if (c8512_10.Loaded === state && onLoad != null) {
|
|
onLoad();
|
|
}
|
|
}, [state, onLoadStart, onError, onLoad]);
|
|
useEffect(() => () => clearTimeout(ref.current));
|
|
if (state === c8512_10.Error) {
|
|
r106 = <View style={[styles.loader, style]}>
|
|
<Text style={styles.loaderText} variant="heading-md/semibold" color="text-overlay-light">
|
|
{intl.string(t["+ITMYX"])}
|
|
</Text>
|
|
</View>;
|
|
} else {
|
|
let description = source.description;
|
|
if (description == null) {
|
|
description = void 0;
|
|
}
|
|
r106 = <>
|
|
{[<Component {...rest} style={style} source={source} onLoadStart={callback2} onProgress={callback} onLoad={callback3} onError={callback4} accessibilityRole="image" accessibilityLabel={description} loop />, state === c8512_10.Loading ? <View style={[styles.loader, style]}>
|
|
{source.videoURI == null ? <Text style={styles.loaderText} variant="heading-md/semibold" color="text-overlay-light">
|
|
{Math.round(state2)}
|
|
%
|
|
</Text> : null}
|
|
<ActivityIndicator color="white" style={styles.loaderIndicator} size="large" />
|
|
</View> : null, <MediaModalSpoilerOverlay style={style} index={index} source={source} />]}
|
|
</>;
|
|
}
|
|
return r106;
|
|
});
|
|
export default r55;
|