How to create a custom time bar?

[darias08]

Hello,

I am trying to create a custom time bar for the video play length. I am having trouble finding a good resource library that can help me with this issue, but most of them I have been finding are from react-native-videoplayer. Is there any good resources you have in mind? I just don't want to use the youtube default time bar because it has some weird effects to it.

[darias08]

Also, how can I use the player Function for seekTo? I want to have a button that displays a certain time for a user to jump to and I am having trouble understanding how can I use that function.

[darias08]

Okay, so I am understanding a little more about the seekTo function. However, I am trying to save the users video state when they navigate to a different screen with the same youtube video.

So for example, I have two separate components one is the Details screen and the other is Modal so if user were to watch the first 10 seconds of a video and they clicked on the video. It navigate them to the modal screen with the time they have left off from the video.

So I am using this as my code, but it leaves the video in a infinite pause at that time and I want it to just play from that point.

Detail page

return(
 <TouchableOpacity
        activeOpacity={0.8}
        onPress={() => {
          setModalVisible(!isModalVisible);
          setClickedIndex(index);

          //Getting current time for video
          playerRef.current?.getCurrentTime().then(
            currentTime => setCurrentTimeVideo({currentTime})
          )

        }}>
        <View style={{width: 370, borderRadius: 5, overflow: 'hidden' , height: 205, marginLeft: 10, backgroundColor: COlORS.dark_gray}} pointerEvents='none'>

        <YoutubePlayer
          height={370}
          mute={true}
          ref={playerRef}
          videoId={item.video_id}
          onChangeState={onStateChange}
          initialPlayerParams={{ controls: false, modestbranding: false }}
          contentScale={0.8}
          play={playing}
          onReady={onReady}
          webViewStyle={ {opacity:0.99} }
          forceAndroidAutoplay={true}
        />
        </View>
        </TouchableOpacity>
)

Modal

 const onStateChange = useCallback(state => {
    if (state === 'ended') {
      setPlaying(false);
    }

    if(state === 'playing') {
      playerRef.current?.seekTo(25, true)  <=== This is where it keeps it pausing at and I just want it to continue from that point.

    }

    if(state === 'paused') {
    }

  }, []);

return (
 <YoutubePlayer
                      height={300}
                      play={playing}
                      mute
                      ref={playerRef}
                      videoId={item.video_id}
                      onChangeState={onStateChange}
                      initialPlayerParams={{
                        controls: false,
                        modestbranding: false,
                      }}

                    />
)

[LonelyCpp]

this not really an issue, you can use something similar to this : https://lonelycpp.github.io/react-native-youtube-iframe/elapsed-time