1

I'm playing a Youtube video. Once something is typed down, the API server would reply back with a URL that is played in the same player as the Youtube's. How can I go back to the YT video once the API's video is over?

The Player video code (Typescript) looks like this, and it is fed by videoUrlProp, a state that handles the URL response from the parent component.

const Player: React.FC<IProps> = ({
  onProgress,
  videoUrlProp,
}:
IProps) => {

// Don't mind this segment.
  const { playerRef, isPlaying } = useStore(
    (state) => ({ playerRef: state.playerRef, isPlaying: state.isPlaying }),
    shallow
  );

  // We check if the source is the original. This is used to resize the player.
  const isOriginalVideo = videoUrlProp.includes("youtube");

  return (
    <div className="player">
      <ReactPlayer
        url={videoUrlProp}
        controls={true}
        onProgress={onProgress}
        width={isOriginalVideo ? "100%" : "70%"}
        height={isOriginalVideo ? "100%" : "100%"}
        className="react-player"
        ref={playerRef}
        playing={isPlaying}
      />
    </div>
  );
};

export default Player;

I'm using the react-player for the player; and this is how the state was declared in the parent component:

const [videoUrl, setVideoUrl] = useState(
    "https://www.youtube.com/watch?v=something"
  );

Any help is welcomed. Thank you!

*Edit: I'm still kinda new to asking on stackoverflow, please do let me know if I'm missing some data or if I should write things down in a different way! Ty! :)

Federiz
  • 15
  • 8

2 Answers2

0

A state doesn't have a "reset" function. But it's easy to simulate it.

If you setup your state and expose the default/initial value, then you would have something like:

const defaultVideoUrl = "https://www.youtube.com/watch?v=something"

Then in your component somewhere, declare the state:

const [videoUrl, setVideoUrl] = useState(defaultVideoUrl);

Then you set back to that default value when the video ends, which according to the docs is by using the onEnded prop:

<ReactPlayer
  ...otherProps
  onEnded={() => setVideoUrl(defaultVideoUrl)}
/>
Alex Wayne
  • 178,991
  • 47
  • 309
  • 337
  • Should I be using `videoUrl` anywhere? As for now the props is the one that contains both new and default urls. – Federiz Dec 21 '21 at 23:06
  • Sure. That's the url of the currently playing video. So that seems important. – Alex Wayne Dec 21 '21 at 23:08
  • In case that the original video is served by the API as a prop (`videoUrlProp`). How should I handle that? Should I assign the prop to the default state instead? `const [videoUrl, setVideoUrl] = useState(viddeoUrlProp);`. – Federiz Dec 21 '21 at 23:17
  • Can you describe your goal more? "served by the API as a prop" doesn't really make any sense since remote APIs don't know anything about react props. So I don't think I understand. I assumed you had a default video (A) defined as a constant and then the user wants to play a different video (B). Video B then plays. When video B is is finished, the play goes back to playing video A. Do I have that right? – Alex Wayne Dec 21 '21 at 23:22
  • I'm sorry, @alex. Yes, your suggestion is correct. It plays a video until the user interacts with the tool. A second video is shown, to finally return to the original video. I have a state in the parent component that gets the videoUrl from the server: `const [videoUrl, setVideoUrl] = useState( "https://www.youtube.com/watch?v=4b4MUYve_U8" );` Then passed down that as a prop: `` – Federiz Dec 21 '21 at 23:27
  • Made it work. You're a hero, Alex! Happy Holidays! – Federiz Dec 22 '21 at 00:07
  • Glad I could help. Don't forget to to accept the answer that help you the most with the checkmark button to the left of each answer. Merry merry. – Alex Wayne Dec 22 '21 at 00:09
0

You can pass a function props to your child component, call it when the video is over with a useEffect to trigger a reset in your parent component.

useEffect(()=> { 
   if (isVideoFinished) props.reset(true)
}, [isVideoFinished])

and in your parent component simply do

const reset = (shouldReset) => {
  if (shouldReset) {
    setVideoUrl('reset to whatever you want')
  }
}
ben a.
  • 1
  • 2
  • I'm sorry, Ben, but I don't fully understand your suggestion. How do I handle the returned function? If possible, please take a look at `Player` and `Main` in this link so I can better show you how the components are put together. :) https://codesandbox.io/s/elated-hugle-yfxn2?file=/src/Main.tsx – Federiz Dec 21 '21 at 23:49