Video Player Project

josefroslan · April 17, 2023, 2:55am

Video Player Project Source Code

Hi everyone!

I realised that Codecademy has released the newer version of the source code recently for Video Player Project in the React Part II.
There is no solution and video walkthrough provided in the project assignment so here is the attached source codes for the project just in case anyone encounters any bugs.

Happy coding!

gist.github.com

https://gist.github.com/codecademydev/112593d199e7e37979e9a53349ba8b02

App.js

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import Video from './Video';
import Menu from './Menu';

const VIDEOS = {
  fast: 'https://content.codecademy.com/courses/React/react_video-fast.mp4',
  slow: 'https://content.codecademy.com/courses/React/react_video-slow.mp4',
  cute: 'https://content.codecademy.com/courses/React/react_video-cute.mp4',
  eek: 'https://content.codecademy.com/courses/React/react_video-eek.mp4'

This file has been truncated. show original

Menu.js

function Menu(props) {
  function clickHandler(event) {
    const text = event.target.value;
    props.onSelectVideo(text);
  };
  
	return (
		  <form onClick={clickHandler}>
			  <input type="radio" name="src" value="fast"/> fast
			  <input type="radio" name="src" value="slow" /> slow

This file has been truncated. show original

Video.js

function Video(props) {
    return (
      <div>
        <video controls autostart autoPlay muted src={props.src}/>
      </div>
    );
};
export default Video;

lewisscrimgeour64889 · April 25, 2023, 5:25pm

Thanks for that!

Any idea why the tutorial tells us to create a const called ‘name’?

" Inside the body of clickHandler() , declare a new constant named name . Set speed equal to event.target.value . This will equal the value of a clicked radio button."

josefroslan · April 26, 2023, 7:20pm

It looks like a typo in the step 6.

It should be the following:
" Inside the body of clickHandler() , declare a new constant named text . Set const text equal to event.target.value . This will equal the value of a clicked radio button."

lewisscrimgeour64889 · April 27, 2023, 7:52am

Ah ok that makes sense, thanks!

papaeagle · April 27, 2023, 7:00pm

Wanted to say thanks a ton m8. Was stuck on this one until I found this post with ya’ll discussing the typo on step 6 which had me really confused and I had figured it was a typo as well I just wasn’t sure. This helped me get past this part.

giga1322268607 · May 5, 2023, 6:48pm

please please please have someone review this whole react course and the updated version. I skipped a lot of the react section the first time bc it was buggy. Ive come back to try it again and have found numerous typos in the instructions that have cost me hours of valuable time. I’m about ready to ask for a second year subscription for free or for a refund because of the amount of time im wasting on silly typos. CodeCademy please get it together!

this is really disheartening as someone trying to learn thinking im not capable then coming to find out the course was just poorly written.

josefroslan · May 6, 2023, 8:35am

I agree but it is also understandable why the React modules in the syllabus is not really helpful for us. React is a tough subject to learn so maybe the curriculum developers had a tough time to design easy-to-understand modules for us.
I believe they are trying their best and they need some time.
It is helpful if we consider to look at React documentations and watch several YouTube videos about React so at least we get some better ideas.

web2256596293 · May 8, 2023, 9:36pm

Thank you so much

matlad · May 24, 2023, 8:52am

I think this part of step 3 might be wrong:

In App.js , define a function called onSelectVideoHandler() with a single string parameter called newVideo . Use newVideo to get a new source from VIDEOS and use this as an argument to setSrc .

In the source code you are changing the videos’ speed, not switching to another video, which seems consistent with the radio buttons’ labels. I find the ‘newVideo’ parameter name a bit confusing.

josefroslan · May 26, 2023, 9:42am

Yes I agree. The right step should be:

In App.js , define a function called onSelectVideoHandler() with a single string parameter called newSpeed .
Use newSpeed to get a new source from VIDEOS and use this as an argument to setSrc .

Thank you for noticing the error.