1import { VideoView, useVideoPlayer } from '@expo/video';
2import React, { useCallback, useEffect, useRef } from 'react';
3import { PixelRatio, ScrollView, StyleSheet, View } from 'react-native';
4
5import Button from '../../components/Button';
6
7export default function VideoScreen() {
8  const ref = useRef<VideoView>(null);
9
10  const enterFullscreen = useCallback(() => {
11    ref.current?.enterFullscreen();
12  }, [ref]);
13
14  const player = useVideoPlayer(
15    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
16  );
17
18  const togglePlayer = useCallback(() => {
19    if (player.isPlaying) {
20      player.pause();
21    } else {
22      player.play();
23    }
24  }, [player]);
25
26  const replaceItem = useCallback(() => {
27    player.replace(
28      'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'
29    );
30  }, []);
31
32  const seekBy = useCallback(() => {
33    player.seekBy(10);
34  }, []);
35
36  const replay = useCallback(() => {
37    player.replay();
38  }, []);
39
40  const toggleMuted = useCallback(() => {
41    player.isMuted = !player.isMuted;
42  }, []);
43
44  useEffect(() => {
45    player.play();
46  }, []);
47
48  return (
49    <ScrollView contentContainerStyle={styles.contentContainer}>
50      <VideoView
51        ref={ref}
52        style={styles.video}
53        player={player}
54        nativeControls={false}
55        contentFit="contain"
56        contentPosition={{ dx: 0, dy: 0 }}
57        allowsFullscreen
58        showsTimecodes={false}
59        requiresLinearPlayback
60      />
61
62      <View style={styles.buttons}>
63        <Button style={styles.button} title="Toggle" onPress={togglePlayer} />
64        <Button style={styles.button} title="Replace" onPress={replaceItem} />
65        <Button style={styles.button} title="Seek by 10 seconds" onPress={seekBy} />
66        <Button style={styles.button} title="Replay" onPress={replay} />
67        <Button style={styles.button} title="Toggle mute" onPress={toggleMuted} />
68        <Button style={styles.button} title="Enter fullscreen" onPress={enterFullscreen} />
69      </View>
70    </ScrollView>
71  );
72}
73
74const styles = StyleSheet.create({
75  contentContainer: {
76    padding: 10,
77    alignItems: 'center',
78  },
79  video: {
80    width: 400,
81    height: 300,
82    borderBottomWidth: 1.0 / PixelRatio.get(),
83    borderBottomColor: '#cccccc',
84  },
85  buttons: {
86    flexDirection: 'column',
87  },
88  button: {
89    margin: 5,
90  },
91});
92