CODEWITHSUNDEEP
react-nativeexpovideo-player
Ricardodnr
Ricardodnr

Reputation: 121

How to handle timeUpdate event?

I'm stuck on how to handle the event timeUpdate using the library expo-video expo-video documentation. I need to get the currentTime of the video in order to create a customize control(nativeControls={false}) but only return 0 because it fires only one time (when the video starts).

Here's my code:

import { useEventListener } from 'expo';
import { useVideoPlayer, VideoView,  } from 'expo-video';
import { StyleSheet} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';


const videoSource =
  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';

export default function Player() {
  const player = useVideoPlayer(videoSource, player => {
    player.loop = true;
    player.play();
    console.log(player.currentTime)
  })
   useEventListener(player, 'timeUpdate', (timeUpdate: TimeUpdateEventPayload) => {
    console.log('Player status changed: ', timeUpdate.currentTime);
   });

  return (
      <SafeAreaView edges={['left', 'right']} style={styles.contentContainer}>
        <VideoView 
          
          style={styles.video} 
          player={player} 
          allowsFullscreen={false} 
          allowsPictureInPicture={false} 
          contentFit='fill'
          nativeControls={false}
        />
      </SafeAreaView>
  );
}

There's anything that I forgot? Thnaks for you help

Upvotes: 1

Views: 131

Answers (1)

costa rica
costa rica

Reputation: 189

Here is a working version with comments where your code needs changing.

I think the big thing to as @C3roe said we need to add timeUpdateEventInterval.

import { useEventListener } from "expo";
import { useVideoPlayer, VideoView } from "expo-video";
import { StyleSheet, View, Dimensions } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const videoSource =
  "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";

export default function Player() {
  const player = useVideoPlayer(videoSource, (player) => {
    player.loop = true;
    player.play();
    player.timeUpdateEventInterval = 1; //< --- this is what you're missing
  });
  useEventListener(player, "timeUpdate", (payload) => {//< --- change here to payload
    console.log("Player status changed: ", payload.currentTime);//< --- ... and here change here 
  });

  return (
    <SafeAreaView edges={["left", "right"]} style={styles.contentContainer}>
      <View>
        <VideoView style={styles.vwVideo} player={player} />
      </View>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,.2)",
    alignItems: "center",
  },
  vwVideo: {
    width: Dimensions.get("window").width,
    height: 300,
  },
});

Upvotes: 1

Related Questions