Home>

Thank you for browsing!

We use React and Youtube API to create an app that allows users to select and deselect the videos they have acquired and save them later.

See

this article I was able to put it out in the list. I've also created a function to select a movie, but I'm having trouble with 2 points.

First, with the current code,onClick ()fires even though the video has not yet been pressed when the video is searched and retrieved from the keywordIt will be selected.Also, if you set the actualonClick (), it will not respond even if you press it. .

And I'd like to change the background color of the video thumbnail and the content ofonClick ()when it is selected and when it is not selected. It doesn't work well. .

  

src/components/common/youtube.js

const Youtube = ({video, handleSelect, classes, selectedVideos}) =>{
  const url = "https://www.youtube.com/embed/" + video.id.videoId;
  const videoInfo = video.snippet;
  // defines a function to determine if it can be selected
  const isSelected = selectedVideos.find (v =>v.uid === video.id.videoId);
  return (
    
Determined using // function
      {isSelected? (
        <Card className = {classes.card}>
          <iframe
           
            type = "ytplayer"
            width = "100%"
            height = "400"
            src = {url}
            frameborder = "0"
          />
On // is placed in the card action area
          <CardActionArea
            onClick = {handleSelect (video.id.videoId)}
          >
             {videoInfo.title} 
            <p>{videoInfo.description}</p>
          </CardActionArea>
        </Card>
      ): (
        <Card className = {classes.card}>
          <iframe
           
            type = "ytplayer"
            width = "100%"
            height = "270"
            src = {url}
            frameborder = "0"
          />
          <CardActionArea
            onClick = {handleSelect (video.id.videoId)}
          >
             {videoInfo.title} 
            <p>{videoInfo.description}</p>
          </CardActionArea>
        </Card>
      )}
    
  );
};
export default Youtube;
  

src/components/common/youtube_list.js

const YoutubeList = ({videos, handleSelect, selectedVideos}) =>
  videos.map (video =>(
    <Youtube
      video = {video}
      handleSelect = {handleSelect}
      selectedVideos = {selectedVideos}
    />
  ));
export default YoutubeList;
  

src/components/common/home.js

const YOUTUBE_API_KEY = process.env.REACT_APP_YOUTUBE_API_KEY;
class Home extends React.Component {
  constructor (props) {
    super (props);
    this.state = {
      videos: [],
      selectedVideos: []
    };
  }
  onSerchYoutube = keyword =>{
    const url = `https://www.googleapis.com/youtube/v3/search?type=video&part=snippet&q=${keyword}&maxResults = 3&key = ${YOUTUBE_API_KEY}`;
    axios
      .get (url)
      .then (response =>{
        this.setState ({
          videos: response.data.items
        });
      })
      .catch (() =>{
        console.log ("Failed to fetch videos :(");
      });
  };
  _handleSelect = id =>{
    const {selectedVideos} = this.state;
    selectedVideos.push ({uid: id});
    console.log ("selected!" + id);
    console.log ("selected", selectedVideos);
  };
  render () {
    return (
      
        
          <Header title = {"Home"} />
          <SearchForm onSerchYoutube = {this.onSerchYoutube} />
          <YoutubeList
            videos = {this.state.videos}
            handleSelect = {this._handleSelect}
            selectedVideos = {this.state.selectedVideos}
          />
        
      
    );
  }
}
export default Home;
Trends