244 lines
8.4 KiB
TypeScript
244 lines
8.4 KiB
TypeScript
// Metro module 10554 (f10555).
|
|
import * as Module19 from "react";
|
|
import { useState, useRef, useCallback, useMemo, useLayoutEffect } from "react";
|
|
import { ScrollView, StyleSheet, View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import { useSurfaceDirectRendererExperiment } from "../SurfaceDirectRendererExperiment";
|
|
import useVideoSpinnerTimer from "../../useVideoSpinnerTimer";
|
|
import useVideoReadyTimeout from "../../../errors/hooks/useVideoReadyTimeout";
|
|
import { getWindowDimensions } from "../../../screen/useWindowDimensions.native";
|
|
import { isAndroid } from "../../../../utils/PlatformUtils";
|
|
import { useStore, OrientationType } from "../../../device/native/DeviceOrientation";
|
|
import MessageLoadingSpinner from "../../../../components_native/common/MessageLoadingSpinner";
|
|
import ZoomLayout_android from "../../../zoom_layout/ZoomLayout.android";
|
|
import DCDVideoRenderer from "./DCDVideoRenderer";
|
|
import ReanimatedRexport from "../../../reanimated/ReanimatedRexport";
|
|
const useStyles = createStyles({
|
|
spinner: {
|
|
height: 32,
|
|
width: 32
|
|
},
|
|
center: {
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
zoomLayoutAndroid: {
|
|
flex: 1
|
|
}
|
|
});
|
|
let c7091_11 = {
|
|
COVER: 0,
|
|
0: "COVER",
|
|
CONTAIN: 1,
|
|
1: "CONTAIN",
|
|
AUTO: 2,
|
|
2: "AUTO"
|
|
};
|
|
const r43 = Module19.memo(function(a0) {
|
|
const { streamId, resizeMode = c7091_11.CONTAIN } = a0;
|
|
let memo;
|
|
const CONTAIN = resizeMode;
|
|
const { gestureEnabled = false, renderTag, videoSpinnerContext, userId, streamKey, paused = false } = a0;
|
|
memo = void 0;
|
|
const styles = useStyles();
|
|
const surfaceDirectRendererExperiment = useSurfaceDirectRendererExperiment(userId, {
|
|
location: "VideoRenderer"
|
|
});
|
|
const [state, setState] = useState(0);
|
|
const [state2, setState2] = useState(0);
|
|
const [state3, setState3] = useState(0);
|
|
const [state4, setState4] = useState(0);
|
|
const [loading, setState5] = useState(true);
|
|
useVideoSpinnerTimer({
|
|
location: "VideoRenderer",
|
|
videoSpinnerContext,
|
|
userId,
|
|
streamId,
|
|
paused,
|
|
loading
|
|
});
|
|
const onReady = useVideoReadyTimeout({
|
|
streamId,
|
|
userId,
|
|
videoSpinnerContext,
|
|
paused,
|
|
loading,
|
|
streamKey
|
|
}).onReady;
|
|
const ref = useRef(null);
|
|
const ref2 = useRef(null);
|
|
const ref3 = useRef({
|
|
width: 0,
|
|
height: 0
|
|
});
|
|
const callback2 = useCallback(({ nativeEvent }) => {
|
|
const { width: width2, height: height2 } = nativeEvent;
|
|
const windowDimensions = getWindowDimensions();
|
|
const r27 = Math.min(Math.sqrt(windowDimensions.width * windowDimensions.height * 4 / (width2 * height2)), 1);
|
|
setState3(width2 * r27);
|
|
setState4(height2 * r27);
|
|
}, [setState3, setState4]);
|
|
const callback3 = useCallback(() => {
|
|
setState5(false);
|
|
onReady();
|
|
}, [onReady]);
|
|
const callback4 = useCallback((a0) => {
|
|
const layout = a0.nativeEvent.layout;
|
|
const { width: width2, height: height2 } = layout;
|
|
setState(width2);
|
|
setState2(height2);
|
|
ref3.current = {
|
|
width: width2,
|
|
height: height2
|
|
};
|
|
}, []);
|
|
const callback = useCallback((a0) => {
|
|
const layout = a0.nativeEvent.layout;
|
|
const { width, height } = layout;
|
|
if (!(isAndroid() || ref.current == null)) {
|
|
const current = ref.current;
|
|
if (!(width <= 0 || height <= 0)) {
|
|
current.scrollResponderZoomTo({
|
|
x: 0,
|
|
y: 0,
|
|
width,
|
|
height,
|
|
animated: false
|
|
});
|
|
current.scrollTo({
|
|
x: 0,
|
|
y: 0,
|
|
animated: false
|
|
});
|
|
}
|
|
requestAnimationFrame(() => {
|
|
if (ref.current != null) {
|
|
const current = ref.current;
|
|
if (!(width <= 0 || height <= 0)) {
|
|
current.scrollResponderZoomTo({
|
|
x: 0,
|
|
y: 0,
|
|
width,
|
|
height,
|
|
animated: false
|
|
});
|
|
current.scrollTo({
|
|
x: 0,
|
|
y: 0,
|
|
animated: false
|
|
});
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, []);
|
|
memo = useMemo(() => {
|
|
if (state !== 0 && state2 !== 0 && state3 !== 0 && state4 !== 0) {
|
|
let r10 = CONTAIN;
|
|
const r8 = state / state2;
|
|
const r7 = state3 / state4;
|
|
if (CONTAIN === c7091_11.AUTO) {
|
|
r10 = !(r8 > 1 && r7 > 1) && !(r8 < 1 && r7 < 1) ? c7091_11.CONTAIN : c7091_11.COVER;
|
|
}
|
|
return r10 === c7091_11.CONTAIN ? r8 > r7 ? state2 / state4 : state / state3 : r10 === c7091_11.COVER ? r7 > r8 ? state2 / state4 : state / state3 : 0;
|
|
}
|
|
return 0;
|
|
}, [state, state2, state3, state4, CONTAIN]);
|
|
const store = useStore((a0) => a0.orientation);
|
|
useLayoutEffect(() => {
|
|
if (isAndroid() && ref2.current != null) {
|
|
const current = ref2.current;
|
|
if (current != null) {
|
|
current.unzoom({
|
|
animated: false
|
|
});
|
|
}
|
|
}
|
|
}, [state, state2, state3, state4, memo]);
|
|
useLayoutEffect(() => {
|
|
if (!isAndroid() && ref.current != null && state3 > 0 && state4 > 0) {
|
|
const current = ref3.current;
|
|
const { width: width2, height: height2 } = current;
|
|
const current2 = ref.current;
|
|
if (!(width2 <= 0 || height2 <= 0)) {
|
|
current2.scrollResponderZoomTo({
|
|
x: 0,
|
|
y: 0,
|
|
width: width2,
|
|
height: height2,
|
|
animated: false
|
|
});
|
|
current2.scrollTo({
|
|
x: 0,
|
|
y: 0,
|
|
animated: false
|
|
});
|
|
}
|
|
}
|
|
}, [state3, state4]);
|
|
const memo2 = useMemo(() => ({
|
|
width: state3 * memo,
|
|
height: state4 * memo
|
|
}), [memo, state3, state4]);
|
|
const memo3 = useMemo(() => ({
|
|
width: state3 * memo,
|
|
height: state4 * memo
|
|
}), [memo, state3, state4]);
|
|
const memo4 = useMemo(() => {
|
|
const width2 = Math.min(state3 * memo, state);
|
|
const height2 = Math.min(state4 * memo, state2);
|
|
return {
|
|
position: "absolute",
|
|
left: (state - width2) / 2,
|
|
top: (state2 - height2) / 2,
|
|
width: width2,
|
|
height: height2,
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
overflow: "hidden"
|
|
};
|
|
}, [state3, memo, state, state4, state2]);
|
|
const memo5 = useMemo(() => ({
|
|
width: state,
|
|
height: state2
|
|
}), [state, state2]);
|
|
const memo6 = useMemo(() => ({
|
|
position: "absolute",
|
|
top: state2 / 2 - Math.min(state4 * memo, state2) / 2,
|
|
right: state / 2 - Math.min(state3 * memo, state) / 2
|
|
}), [state3, memo, state, state4, state2]);
|
|
const r127 = loading ? <MessageLoadingSpinner animate style={styles.spinner} /> : null;
|
|
const r5 = store === OrientationType.PORTRAIT;
|
|
return isAndroid() ? <View onLayout={callback4} style={[styles.center, StyleSheet.absoluteFillObject]}>
|
|
<ZoomLayout_android ref={ref2} style={styles.zoomLayoutAndroid} minimumZoomScale={1} gestureEnabled={gestureEnabled}>
|
|
<View collapsable={false} style={{
|
|
width: state,
|
|
height: state2,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
}}>
|
|
<DCDVideoRenderer useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={streamId} onSize={callback2} onReady={callback3} style={memo3} />
|
|
{r127}
|
|
</View>
|
|
</ZoomLayout_android>
|
|
<View style={memo6}>
|
|
{loading ? null : gestureEnabled ? r5 ? renderTag == null ? void 0 : renderTag() : null : null}
|
|
</View>
|
|
</View> : gestureEnabled ? <ScrollView ref={ref} onLayout={callback4} style={StyleSheet.absoluteFillObject} contentContainerStyle={memo5} bounces={false} pinchGestureEnabled={!loading} maximumZoomScale={8} minimumZoomScale={1} showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false} scrollEventThrottle={16}>
|
|
<View collapsable={false} style={memo5} onLayout={callback}>
|
|
<View style={memo4}>
|
|
<ReanimatedRexport.View>
|
|
<DCDVideoRenderer useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={streamId} onSize={callback2} onReady={callback3} style={memo2} />
|
|
</ReanimatedRexport.View>
|
|
{r5 ? renderTag == null ? void 0 : renderTag() : null}
|
|
</View>
|
|
{r127 != null ? <View style={[StyleSheet.absoluteFillObject, styles.center]}>{r127}</View> : null}
|
|
</View>
|
|
</ScrollView> : <View onLayout={callback4} style={[styles.center, StyleSheet.absoluteFillObject]}>
|
|
<DCDVideoRenderer useSurfaceDirectRenderer={surfaceDirectRendererExperiment} streamId={streamId} onSize={callback2} onReady={callback3} style={memo2} />
|
|
{r127}
|
|
</View>;
|
|
});
|
|
export default r43;
|
|
export { c7091_11 as ResizeMode };
|