fix: simulate landscape via CSS transform when expo-screen-orientation unavailable

This commit is contained in:
Developer
2026-03-11 10:30:59 +08:00
parent a2d401da40
commit 71ffbf3585

View File

@@ -20,8 +20,10 @@ interface Props {
export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, onMiniPlayer, bvid, cid, danmakus, onTimeUpdate }: Props) { export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, onMiniPlayer, bvid, cid, danmakus, onTimeUpdate }: Props) {
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const { width } = useWindowDimensions(); const { width, height } = useWindowDimensions();
const VIDEO_HEIGHT = width * 0.5625; const VIDEO_HEIGHT = width * 0.5625;
// When ScreenOrientation is unavailable (Expo Go), simulate landscape via transform
const needsRotation = !ScreenOrientation && fullscreen;
const lastTimeRef = useRef(0); const lastTimeRef = useRef(0);
const handleEnterFullscreen = async () => { const handleEnterFullscreen = async () => {
@@ -85,21 +87,26 @@ export function VideoPlayer({ playData, qualities, currentQn, onQualityChange, o
<Modal visible={fullscreen} animationType="fade" statusBarTranslucent> <Modal visible={fullscreen} animationType="fade" statusBarTranslucent>
<StatusBar hidden /> <StatusBar hidden />
<View style={{ flex: 1, backgroundColor: '#000' }}> <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
<NativeVideoPlayer <View style={needsRotation
playData={playData} ? { width: height, height: width, transform: [{ rotate: '90deg' }] }
qualities={qualities} : { flex: 1, width: '100%' }
currentQn={currentQn} }>
onQualityChange={onQualityChange} <NativeVideoPlayer
onFullscreen={handleExitFullscreen} playData={playData}
bvid={bvid} qualities={qualities}
cid={cid} currentQn={currentQn}
danmakus={danmakus} onQualityChange={onQualityChange}
isFullscreen={true} onFullscreen={handleExitFullscreen}
initialTime={lastTimeRef.current} bvid={bvid}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }} cid={cid}
style={{ width: '100%', height: '100%' }} danmakus={danmakus}
/> isFullscreen={true}
initialTime={lastTimeRef.current}
onTimeUpdate={(t) => { lastTimeRef.current = t; onTimeUpdate?.(t); }}
style={{ width: '100%', height: '100%' }}
/>
</View>
</View> </View>
</Modal> </Modal>
</> </>