دوران فيديو في تطبيق React Native

عمر سالم2 · 16 مارس 2021

لدي المكون التالي لعرض فيديو في وضع ال Landscape ولكن لا ترجع الشاشة الى وضعها العادي بعد اغلاق الفيديو..

import * as React from 'react';
import { View } from 'react-native';

import { Button, Video } from 'expo-av';
import * as ScreenOrientation from 'expo-screen-orientation';

const VIDEO_URI = 'MY_VIDEO_URI_GOES_HERE';

export default function App() {
	const video = React.useRef(null);
	const [status, setStatus] = React.useState({});

	return (
		<View>
			<Video
				ref={video}
				source={{ uri: VIDEO_URI }}
				useNativeControls
				resizeMode="cover"
				onPlaybackStatusUpdate={status => setStatus(() => status)}
				onFullscreenUpdate={async ({ fullscreenUpdate }) => {
					if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) {
						await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
					} else {
						await ScreenOrientation.unlockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
					}

					return true;
				}}
			/>
			<View>
				<Button
					title={status.isPlaying ? 'Pause' : 'Play'}
					onPress={() =>
						status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
					}
				/>
			</View>
		</View>
	);
}

إسلام عبدالعزيز · 16 مارس 2021

تستخدم الدالة lockAsync لعمل lock على الشاشة بحيث لا يستطيع المستخدم دوران الفيديو. على الجانب الآخر، تستخدم unlockAsync لفك هذا القفل. في الكود المرفق، إذا أردت أن ترجع الشاشة مرة أخرى إلى الوضعية الإفتراضية، عليك استخدام lockAsync ايضاً، ولكن مع اعطائها الوضعية الجديدة (Portrait على سبيل المثال).

if (fullscreenUpdate === Video.FULLSCREEN_UPDATE_PLAYER_DID_PRESENT) {
	await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.LANDSCAPE);
} else {
	// لاحظ استخدام lockAsync مرة اخرى ولكن مع الوضعية الجديدة
	await ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
}

return true;